1、单双击事件有哪些?
单击:mousedown, mouseup, click
双击:mousedown, mouseup, click, mousedown, mouseup, click, dblclick
2、冲突原因
- 由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件,原生的js不提供专门的双击事件。
- 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示
3、出现问题的代码
// 标注单击事件
ele.on("click", function (params) {
console.log('单击事件')
return;
});
// 标注双击事件
ele.on("dblclick", function (params) {
console.log('双击事件')
});
4、解决方法–setTimerout
双击时为了屏蔽单击事件,引入定时器功能,动态的为每次鼠标单击计时,300ms,300ms内鼠标再次点击会出发双击事件而不走单击事件。
5、解决后代码
var clickTimeId;
// 标注单击事件
oroptionmapjsonr_charts.on("click", function (params) {
clearTimeout(clickTimeId);
clickTimeId = setTimeout(function () {
console.log('单击事件')
}, 250);
});
// 标注双击事件
oroptionmapjsonr_charts.on("dblclick", function (params) {
clearTimeout(clickTimeId);
console.log('双击事件')
});