Diferenciar clic vs mousedown/mouseup

Question

He leído varias respuestas sobre stackoverflow relacionadas con esta situación, pero ninguna de las soluciones está funcionando.

Estoy tratando de hacer cosas diferentes en función de si un usuario hace clic en un elemento, o mantiene el mouse sobre ese elemento con jQuery.

¿Es posible lograr esto?

Answer 1

Esto es uno de los enfoques

1. establecer una variable a cierto
2. crear una función que va a establecer en false cuando se le llama
3. tienen un temporizador (setTimeout()) empezará la cuenta atrás en mousedown()
4. en mouseup, borrar el tiempo de espera, y comprobar si la variable es verdadera o falsa
5. si es falsa, llamar a la función que desea que suceda al hacer clic
6. en cualquier caso, establezca la variable de nuevo a cierto

Esto va a hacer lo que quiere. Aquí hay una jsFiddle mostrando cómo podría funcionar: http://jsfiddle.net/zRr4s/3/

Answer 2

onMouseDown se activará cuando se presiona la izquierda o la derecha (o central). Del mismo modo, onMouseUp se activará cuando se suelte cualquier botón. onMouseDown se activará incluso cuando se haga clic con el mouse en el objeto y luego se mueva fuera de él, mientras que onMouseUp se activará si haces clic y mantienes presionado el botón en cualquier otro lugar, luego lo sueltas sobre el objeto.

onClick solo se activará cuando se presiona y suelta el botón izquierdo del mouse en el mismo objeto. En caso de que le importe el pedido, si el mismo objeto tiene configurados los 3 eventos, está onMouseDown, onMouseUp y luego onClick. Sin embargo, cada uno solo debería dispararse una vez.

Detalles:

• http://api.jquery.com/click/
• http://api.jquery.com/mouseup/
• http://api.jquery.com/mousedown/

Answer 3

He aquí una solución que es compatible con los clics y sostiene:

// Timeout, started on mousedown, triggers the beginning of a hold 
var holdStarter = null; 
// Milliseconds to wait before recognizing a hold 
var holdDelay = 500; 
// Indicates the user is currently holding the mouse down 
var holdActive = false; 
// MouseDown 
function onMouseDown(){ 
    // Do not take any immediate action - just set the holdStarter 
    // to wait for the predetermined delay, and then begin a hold 
    holdStarter = setTimeout(function() { 
     holdStarter = null; 
     holdActive = true; 
     // begin hold-only operation here, if desired 
    }, holdDelay); 
} 
// MouseUp 
function onMouseUp(){ 
    // If the mouse is released immediately (i.e., a click), before the 
    // holdStarter runs, then cancel the holdStarter and do the click 
    if (holdStarter) { 
     clearTimeout(holdStarter); 
     // run click-only operation here 
    } 
    // Otherwise, if the mouse was being held, end the hold 
    else if (holdActive) { 
     holdActive = false; 
     // end hold-only operation here, if desired 
    } 
} 
// Optional add-on: if mouse moves out, then release hold 
function onMouseOut(){ 
    onMouseUp(); 
} 

He aquí una demostración: http://jsfiddle.net/M7hT8/1/

basada originalmente en la solución de daveyfaherty. Sé que esta pregunta es de hace un tiempo, pero estoy compartiendo mi solución para cualquiera que encuentre esto a través de una búsqueda.

Answer 4

//last mouse coordinate 
var mouseX = 0; 
//epsilon interval 
var mouseEps = 10; 

function mouseDownHandler(e) { 
    e.preventDefault(); 
    mouseX = e.clientX; 
}; 

function mouseUpHandler(e) { 
    e.preventDefault(); 
    if (Math.abs((mouseX - e.clientX)) < mouseEps) { 
     clickHandler(e); 
    } 
}; 

function clickHandler(e) { 
};