JS 同DOM节点同时绑定【双击】【单击】事件

2,815

这是我参与8月更文挑战的第27天,活动详情查看:8月更文挑战

节点绑定【单击】或者【双击】事件方法很简单,可以使用 onclick 单击事件及 ondbclick 双击事件即可,但是一个节点同时绑定【双击】和【单击】事件,你知道怎么监听么?

更多文章在我的 Github 及个人公众号【全栈道路】上,欢迎观赏【一个不知名的足球狗的前端知识点】,如有受益,不要钱,小手点个Star

阅读本文您将收获

  • 节点同时绑定【单击】事件和【双击】事件
  • 【双击】事件会误触发两次单击事件如何解决

基本结构

  • 首先确定基本DOM结构,后续的 JS 代码都是依赖于这个结构进行处理的。
<div>
	<button id="eventTarget" class="btn">同时绑定单击双击事件</button>
	<div class="num">事件触发次数: {{num}}</div>
</div>

绑定【单击】事件

  • 使用原生 JS 方式进行监听 click
document.getElementById('eventTarget').addEventListener('click', singleClick);
function singleClick() {}

绑定【双击】事件

  • 使用原生 JS 方法进行监听 dblclick
document.getElementById('eventTarget').addEventListener('click', doubleClick);
function doubleClick() {}

同时绑定【单击】【双击】事件

  • 按照正常的思维可能很多人都会直接在 DOM 节点绑定两个事件,但是在实践中我们就会发现,直接绑定两个事件时,【单击】事件是正常的,而【双击】时会连续触发两次【单击】事件,然后触发一次【双击】事件,通过代码计数我们也能看到。

1.gif

  • 那么怎么解决这种问题呢,常见的解决方式有几种

定时器方式

通过设置两次点击事件的间隔时间,来实现单击双击并存。

  • 首先我们设置定时器,用于控制时间间隔
let clickTimer = null;
  • 绑定事件还是正常进行绑定,这里不再赘述,首先处理【单击】事件
function singleClick() {
	// 先清除上次执行的Timer
	clearTimeout(clickTimer);
	// 利用Timer的时间间隔进行单击延时
	clickTimer = setTimeout(function() {
		...do something
		console.log("鼠标单击");
	}, 300);
}
  • 然后处理【双击】事件
function doubleClick() {
	// 因为会先执行【单击】事件,所以先将执行的 Timer 清除掉
	clearTimeout(clickTimer);
	...do something
}

2.gif

  • 这样处理的好处是利用定时器,将【单击】事件和【双击】事件区分开,【单击】事件正常执行,延时的处理对交互的影响较小,【双击】事件虽然还是会触发【单击】事件的执行,但是不会触发内部执行逻辑,两个函数虽都执行但是逻辑不会影响。

写在最后

如果你觉得这篇文章对你有益,烦请点赞以及分享给更多需要的人!

欢迎关注【全栈道路】及微信公众号【全栈道路】,获取更多好文!
有需要【百度】&【字节跳动】&【京东】&【猿辅导】内推的也请留言哦,你将享受VIP级极速内推服务~

往期好文

【面试必问】前端的深拷贝和浅拷贝

提高开发效率的 Chrome 开发者工具高端使用技巧(一)

创建个性化的 Github 个人主页

微信 JS API 支付的实现

面试官问你<img>是什么元素时你怎么回答

特殊的JS 浮点数的存储与计算

[万字长文]百度和好未来面试经含答案 | 掘金技术征文

前端实用正则表达式&小技巧,一股脑全丢给你🏆 掘金技术征文|双节特别篇

冷门的 HTML tabindex 详解

几行代码教你解决微信生成海报及二维码

Vue3.0 响应式数据原理:ES6 Proxy

[前端面试]前端缓存问题看这篇,让面试官爱上你

如何优雅地画一条细线

[三分钟小文]前端性能优化-HTML、CSS、JS部分

[三分钟小文]前端性能优化-页面加载速度优化

[三分钟小文]前端性能优化-网络传输层优化