1. ホーム
  2. javascript

[解決済み] シングルクリックとダブルクリックを区別するには?

2022-06-06 14:47:31

質問

liにボタンが1つあり、idが "my_id" . この要素に2つのjQueryイベントを付けました。

1.

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

2.

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

しかし、毎回 single click

どのように解決するには?

最初のクリックの後、次のクリックがあるかどうかをタイムアウトで確認する必要があります。

以下はそのトリックです。 :

// 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);
      }
    });
  });
}

使用方法

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

<button>Click Me!</button>

EDITです。

以下のように、ネイティブの dblclick イベントを使用するのが望ましいです。 http://www.quirksmode.org/dom/events/click.html

または、jQueryが提供するもの。 http://api.jquery.com/dblclick/