2013-10-01 26 views
27

Sto imparando eventi in jquery. Mentre li implementavo mi sono imbattuto in un dubbio. Qual è la differenza tra evento mousedown() e click(). E quale evento dovrei usare a quali condizioni?Differenza tra mouse e click in jquery

Per esempio: Entrambi gli eventi svolgono lo stesso compito nel seguente codice:

$("#p1").mousedown(function(){ 
    alert("Mouse down over p1!"); 
}); 


$("#p1").click(function(){ 
    alert("Mouse down over p1!"); 
}); 

Entrambi svolgono la same.Can qualcuno chiarire la differenza. Se stesso, quale preferirei ?.

+2

Considerate il caso di "Trascinamento" e otterrete la vostra risposta. –

+0

D'accordo con Gupta. Esempio: posiziona 2 pulsanti 1 ha avviso su Click, 2 ha avviso su mouse. Fai il mouse su di essi e trascina il cursore e lascia andare. Mouse down - sparerà, click - non sarà – Cheese

risposta

34

onMouseDown si innesca quando viene premuto il tasto sinistro o destro (o centrale). Allo stesso modo, onMouseUp si innescherà quando viene rilasciato qualsiasi pulsante. onMouseDown si attiverà anche quando si fa clic con il mouse sull'oggetto, quindi si sposta su di esso, mentre onMouseUp si innesca se si fa clic e si tiene premuto il pulsante altrove, quindi lo si rilascia sopra l'oggetto.

onClick si attiva solo quando il pulsante sinistro del mouse viene premuto e rilasciato sullo stesso oggetto. Se ti interessa l'ordine, se lo stesso oggetto ha tutti e 3 gli eventi impostati, è onMouseDown, onMouseUp, quindi onClick. Tuttavia, anche ciascuno dovrebbe attivarsi una sola volta.

Dettagli:

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

Source scritti da Anton Baksheiev

+3

Questi URL si riferiscono a jQuery, mentre 'onClick',' onMouseUp' e 'OnMouseDown' non sono realmente eventi jQuery, ma eventi JavaScript. Penso che sia meglio collegare a [una specifica w3c in questo caso.] (Http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents) (Scorri verso il basso un po 'sulla pagina collegata) –

+0

Ma se leghiamo gli eventi di click e mouse sullo stesso elemento. l'evento Mousedown spara sempre e non il clic. Perché sta succedendo così. Cosa facciamo se abbiamo bisogno sia del mouse che del clic. vedi questo jsfiddle http://jsfiddle.net/a74k92dd/ – Arvin

+0

http://jsfiddle.net/wBfbm/37/ per i test – hlcs

11

Un evento mousedown viene generato quando si preme il pulsante del mouse ma prima che venga rilasciato.

L'evento click viene generato dopo gli eventi mousedown e mouseup.

+0

Dovresti anche menzionare che l'evento 'click' viene attivato se l'evento mouse e mouseup si verifica sullo stesso elemtn. –

1

$(element).click() incendi, quando si premere il pulsante del mousee poi rilascia esso.

$(element).mousedown() si accende, quindi si preme il pulsante del mouse.

Provare a tenere premuto il pulsante cliccato su quel pulsante, e quindi rilasciarlo qui: http://jsfiddle.net/n9rJ9/

0

Ci sono una serie di eventi legati clic del mouse in mouseDown, mouseUp e mouseClick, più alcuni altri.

Un evento mouseClick è in genere preceduto da un mouseDown seguito a breve da un mouseUp fino a quando il mouse non viene spostato nel processo.

1

Non lo fanno. Potresti pensare di sì, dato che hai associato entrambi i gestori di eventi allo stesso elemento, quindi il mouse sparerà sempre prima che si verifichi l'evento click.

Se li associ a elementi diversi, vedrai mousdown che si spara sempre premendo un pulsante (qualsiasi pulsante del mouse) senza rilascio e il clic si attiva, dopo aver rilasciato il pulsante del mouse del lato sinistro (primario) .

Vedi questo piccolo jsfiddle: http://jsfiddle.net/wBfbm/

$("#p1").mousedown(function(){ 
    alert("Mouse down over p1!"); 
}); 


$("#p2").click(function(){ 
    alert("Mouse down over p1!"); 
}); 
1

onMouseDown attiverà quando si preme a sinistra oa destra (o medio).

onClick si attiva solo quando il pulsante sinistro del mouse viene premuto e rilasciato sullo stesso oggetto.

1

Provare in questo modo. Perché event.stopPropagation non interrompe l'evento evento click dal mouse verso il basso. Gli eventi mouse-down e clic non sono correlati tra loro.

var mousedDownFired = false; 

    $("#id").mousedown(function(event){ 
     mousedDownFired =true; 
     //code 
    }); 

    $("#id").click(function(event){ 
    if(mousedDownFired) 
     { 
     mousedDownFired = false; 
     return; 
     } 
     //code 
}); 

Aggiornato:

NO. Gli eventi del mouse sono innescati come questo senso

1) MouseDown

2) Fare clic su

3) MouseUp

se il mouse verso il basso è innescato poi bandiera consentirà dopo mouse evento click attiverà .In questo evento click disabiliterà la variabile flag. questo funzionerà come un modo ciclico. non prendere in considerazione due mouse down o due click

+2

Beh, questo è semplicemente sbagliato. È necessario aggiornare questo post in modo che abbia le informazioni corrette. È possibile vedere chiaramente da questa codepen che l'ordine è mouse, mouseup, clic: https://codepen.io/mudassir0909/pen/eIHqB – kamelkev

+0

L'ordine può variare a seconda del browser utilizzato. Non l'ho testato su tutti i browser. Tuttavia, nelle mie osservazioni sugli eventi gestiti in Chrome, gli eventi vengono attivati ​​nell'ordine di mouse, mouse e quindi clic. – BrightIntelDusk

+0

Tutti i browser attivano l'ordine: mouse, mouse, clic, non l'ordine indicato in questa risposta. – JonBrave

Problemi correlati