单击事件和双击事件冲突问题

同一个元素上，绑定多种事件类型，比较常见的是单击事件和一些鼠标事件，一般而言影响不大。但是如果同时绑定单击事件和双击事件呢？

单击事件执行过程：mousedown, mouseup, click。双击事件的执行过程:mousedown, mouseup, click; mousedown, mouseup, click。仔细看，其实双击事件就是执行了两次单击事件，那这种情况下，怎么才能避免触发单击事件呢？

解决问题的关键在于延迟定时器setTimeout，单击事件延迟执行，如果检测到连续点击的话，就认为是双击事件，不在执行单击事件。

//  单击事件
var timer = null;
let 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();
});