jquery雙擊事件會觸發單擊事件

實際工作中，我們經常會遇到在同一個元素上，綁定多種事件類型，比較常見的是單擊事件和一些鼠標事件，一般而言影響不大。但是如果同時綁定單擊事件和雙擊事件呢？

其實，只要能夠想明白的話，解決方案也比較簡單，我們想象一下單擊事件執行過程：mousedown, mouseup, click。雙擊事件的執行過程呢？mousedown, mouseup, click; mousedown, mouseup, click。仔細看，其實雙擊事件就是執行了兩次單擊事件，那這種情況下，怎么才能避免觸發單擊事件呢？

奧秘就在於延遲定時器setTimeout，單擊事件延遲執行，如果檢測到連續點擊的話，就認為是雙擊事件，不在執行單擊事件。

//  單擊事件
var timer = null;
$('.mask-body').on('click', '.leaver-student', function () {   // 點擊輸入框展開下拉列表
  clearTimeout(timer);
  timer = setTimeout(function () {
　  // 這里采用執行自定義事件的方式
    $('.leaver-student').trigger('slide');      
  }, 300); 　　// 延遲300ms執行單擊事件
});

//  雙擊輸入框時可以輸入學生姓名  雙擊事件
$('.mask-body').on('dblclick', '.leaver-student', function (ev) {
  ev.stopPropagation();
  clearTimeout(timer);
  $('.leavers li').trigger('click');
  $(this).removeAttr('readonly').val('').focus();
});

　由此擴展出去，在觸摸屏上觸發滑動事件時，為什么沒有觸發單擊事件呢？

事實上采用的是相同的方式，在點擊事件時，延遲執行，以便設備確認這次操作究竟是不是真正的點擊事件。