ユーザーが3回クリックしたときに発生するカスタムイベントを書き込む方法

Question

ユーザーが任意のhtmlノードで3回クリックすると発生するカスタムイベントを作成しようとしています。

私は

var evt = document.createEvent("Event"); 
evt.initEvent("myEvent",true,true); 

を使用していても作成できることを知っているが、私は3回がイベントをクリックすることをキャプチャする方法を取得しておりません。

私にはこれに対する書き込み方法を示唆してくれれば幸いです。

ありがとうございました！

Answer 1

あなたは Code and example特別なイベントを作成することができます - ここにあなたの問題の溶媒和がある:)

Answer 2

繰り返し変数を作成し、要素が3回クリックされたかどうかを確認できます。例えば

：

var clickTimer = 0; 
document.body.addEventListener('click', function() { 
    clickTimer++; 
    if(clickTimer == 3) { 
     clickTimer = 0; 
     // fire your event 
    } 
}, true); 

あなたが最初のクリックでタイムスタンプを比較することができdbclickのようにこの動作をするために。例えば

：

var clickTimes = 0; 
var fisrtClickTime = 0; 

element.addEventListener('click', function(event) { 
    clickTimes++; 
    if(clickTimes == 1) { 
     fisrtClickTime = +new Date(); 
    } 
    if(clickTimes == 3) { 
     clickTimes = 0; 
     firstClickTime = 0; 
     if((+new Date() - fisrtClickTime) < 1000) { 
      /* do something like dispatch my custom event */ 
     } 
    } 
}); 

Answer 3

ちょうどクリック数を格納する変数を作成します。

var clickTimes = 0; 

element.addEventListener('click', function(event) { 
    clickTimes++; 
    if(clickTimes==3) { 
     clickTimes = 0; 
     /* do something like dispatch my custom event */ 
    } 
}); 

Answer 4

これは、任意の特定の要素のクリックをカウントし、すべての第三クリックでイベントをトリガします。

$('selector').on('click',function(e){ 
    Event_threshold = 500; 

    var clicked_times = $(this).data('Event-clicked-times'); 

    if(clicked_times == '') 
     clicked_times = 0; 

    if(clicked_times == 0) 
     $(this).data('Event-first-click-timestamp',e.timeStamp); 

    clicked_times++; 

    if(e.timeStamp-$(this).data('Event-first-click-timestamp')<Event_threshold) 
    { 
     if(clicked_times == 3) 
     { 
      $(this).data('Event-clicked-times',0); 
      $(this).trigger('Event'); 
     } 
     else 
      $(this).data('Event-clicked-times',clicked_times); 

    } 
    else 
     $(this).data('Event-clicked-times',0); 
}); 

EDIT： しきい値コントロールが固定されています。

Answer 5

これは、外部変数を使用せずに、HTML5の「データ」属性をストレージに使用するため、複数の要素で作業します。

$('#yourLink').click(function() { 
    window.setTimeout(function() {$(this).data("count",1)},300) 
    if(typeof $(this).data("count")=='undefined') { 
     $(this).data("count",1) 
    } 
    else { 
     var myCount = parseInt($(this).data("count")) 
     myCount++  
     if(myCount==3) { 
      alert("3!") 
      $(this).data("count",0) 
     } 
     else { 
      $(this).data("count",myCount) 
     }  
    } 

})