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

　由此扩展出去，在触摸屏上触发滑动事件时，为什么没有触发单击事件呢？

事实上采用的是相同的方式，在点击事件时，延迟执行，以便设备确认这次操作究竟是不是真正的点击事件。