javascript jquery - come differenziare l'evento single click e l'evento doppio clic?





on change (10)


Ho scritto un semplice plugin jQuery che consente di utilizzare un evento personalizzato 'singleclick' per differenziare un singolo clic da un doppio clic:

https://github.com/omriyariv/jquery-singleclick

$('#someDiv').on('singleclick', function(e) {
    // The event will be fired with a small delay.
    console.log('This is certainly a single-click');
}

Ho un singolo pulsante in li con ID "my_id" . Ho allegato two jquery eventi two jquery con questo elemento

1.  $("#my_id").click(function() { 
            alert('single click');
    });

2.   $("#my_id").dblclick(function() {
              alert('double click');
    });

Ma ogni volta mi da il single click




Il comportamento dell'evento dblclick è spiegato in http://www.quirksmode.org/dom/events/click.html .

L'ordine degli eventi per un dblclick è:

  1. mousedown
  2. MouseUp
  3. clic
  4. mousedown
  5. MouseUp
  6. clic
  7. DblClick

L'unica eccezione a questa regola è (ovviamente) Internet Explorer con il loro ordine personalizzato di:

  1. mousedown
  2. MouseUp
  3. clic
  4. MouseUp
  5. DblClick

Come puoi vedere, l'ascolto di entrambi gli eventi sullo stesso elemento comporterà chiamate extra al tuo gestore di click .




Ecco un'alternativa del codice di jeum per un numero arbitrario di eventi:

 var multiClickHandler = function (handlers, delay) {
    var clicks = 0, timeout, delay = delay || 250;
    return function (e) {
      clicks++;
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        if(handlers[clicks]) handlers[clicks](e);
        clicks = 0;
      }, delay);
    };
  }

  cy.on('click', 'node', multiClickHandler({
    1: function(e){console.log('single clicked ', e.cyTarget.id())},
    2: function(e){console.log('double clicked ', e.cyTarget.id())},
    3: function(e){console.log('triple clicked ', e.cyTarget.id())},
    4: function(e){console.log('quadro clicked ', e.cyTarget.id())},
    // ...
  }, 300));

Necessario per un'applicazione cytoscape.js .




Nessuna di queste risposte ha soddisfatto le mie esigenze, quindi ho creato una soluzione ispirata al profilo pubblicato da @AdrienSchuler. Utilizzare questa soluzione solo quando si desidera associare un singolo clic E un doppio clic su un elemento. In caso contrario, consiglio di utilizzare i listener nativi e dblclick .

Queste sono le differenze:

  • Vanillajs, niente dipendenza
  • Non aspettare sul setTimeout per gestire il click o il gestore di doppio clic
  • Quando si fa doppio clic su prima, si attiva il gestore di clic, quindi il gestore di doppio clic

Javascript:

function makeDoubleClick(doubleClickCallback, singleClickCallback) {
    var clicks = 0, timeout;
    return function() {
        clicks++;
        if (clicks == 1) {
            singleClickCallback && singleClickCallback.apply(this, arguments);
            timeout = setTimeout(function() { clicks = 0; }, 400);
        } else {
            timeout && clearTimeout(timeout);
            doubleClickCallback && doubleClickCallback.apply(this, arguments);
            clicks = 0;
        }
    };
}

Uso:

var singleClick = function(){ console.log('single click') };
var doubleClick = function(){ console.log('double click') };
element.addEventListener('click', makeDoubleClick(doubleClick, singleClick));

Di seguito è riportato l'utilizzo in un jsfiddle, il pulsante jQuery è il comportamento della risposta accettata.

jsfiddle




Usa l'eccellente plugin jQuery Sparkle. Il plugin ti offre la possibilità di rilevare il primo e l'ultimo clic. Puoi usarlo per differenziare tra clic e dblclick rilevando se un altro clic è stato seguito dal primo clic.

Dai un'occhiata a http://balupton.com/sandbox/jquery-sparkle/demo/




Mi piace evitare jquery (e altre librerie 90-140k), e come i browser noti gestiscono onclick prima, quindi ecco cosa ho fatto su un sito web che ho creato (questo esempio copre anche ottenere una localizzazione locale cliccata xy)

clicksNow-0; //global js, owell

function notify2(e, right) {  // called from onclick= and oncontextmenu= (rc)
var x,y,xx,yy;
var ele = document.getElementById('wrap');  
    // offset fixed parent for local win x y
var xxx= ele.offsetLeft;
var yyy= ele.offsetTop;

//NScape
if (document.layers || document.getElementById&&!document.all) {
    xx= e.pageX;
    yy= e.pageY;
} else {
    xx= e.clientX;
    yy= e.clientY;
}
x=xx-xxx;
y=yy-yyy;

clicksNow++;
    // 200 (2/10ths a sec) is about a low as i seem to be able to go
setTimeout( "processClick( " + right + " , " + x + " , " + y + ")", 200);
}

function processClick(right, x, y) {
if (clicksNow==0) return; // already processed as dblclick
if (clicksNow==2) alert('dbl');
clicksNow=0;
    ... handle, etc ...
}

Spero possa aiutare




È necessario utilizzare un timeout per verificare se c'è un altro clic dopo il primo clic.

Ecco il trucco :

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

Uso:

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})
<button>Click Me!</button>

MODIFICARE:

Come indicato di seguito, preferisci utilizzare l'evento nativo di dblclick : http://www.quirksmode.org/dom/events/click.html

O quello fornito da jQuery: http://api.jquery.com/dblclick/




Un'altra semplice soluzione Vanilla basata sulla risposta A1rPun (vedi il jsfiddle per la soluzione jQuery, ed entrambi sono in jsfiddle.net/jeum/cpbwx5vr/21 ).

Sembra che per NON attivare un gestore single-click quando l'utente fa doppio clic, il gestore single-click viene necessariamente attivato dopo un ritardo ...

var single = function(e){console.log('single')},
    double = function(e){console.log('double')};

var makeDoubleClick = function(e) {

  var clicks = 0,
      timeout;

  return function (e) {

    clicks++;

    if (clicks == 1) {
      timeout = setTimeout(function () {
        single(e);
        clicks = 0;
      }, 250);
    } else {
      clearTimeout(timeout);
      double(e);
      clicks = 0;
    }
  };
}
document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);



Bene, al fine di fare doppio clic (fare clic due volte) è necessario prima fare clic una volta. Il gestore click() si attiva sul primo clic e, non dblclick() l'avviso, non hai la possibilità di fare il secondo clic per dblclick() gestore dblclick() .

Cambia i gestori per fare qualcosa di diverso da un alert() e vedrai il comportamento. (forse cambia il colore di sfondo dell'elemento):

$("#my_id").click(function() { 
    $(this).css('backgroundColor', 'red')
});

$("#my_id").dblclick(function() {
    $(this).css('backgroundColor', 'green')
});



Mi piace usare i nativi, fai questo, credici o no!

1.

// remove all items all class  
const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
    items[i].className = '';
}

2.

// only remove all class of first item
const item1 = document.querySelector('item');
item1.className = '';

modi jQuery

  1. $("#item").removeClass();

  2. $("#item").removeClass("class1 ... classn");





javascript jquery javascript-events