JS鼠标点击事件的实现

这几天看了一下JavaScript高级程序设计中的Dom事件相关内容，同时看到网上有关鼠标多次点击事件，鼠标事件是简单、常用的事件之一，于是便针对点击事件进行一些小的扩展和实现，增强对Dom事件的进一步理解。其中的实现和思路是自己总结的，有什么不对的地方还请大神们交流指正。

1、制作一个通用的事件处理模块（原生实现）

以下实现基于AMD定义模块方式：

2、鼠标3击事件实现

鼠标点击事件涉及的事件及执行触发顺序：

mousedown：鼠标任意键按下时触发

mouseup：释放鼠标按钮时触发

click：单击

mousedown

mouseup

dblclick：双击

显然，click是依赖dblclick的，可以考虑根据这两个事件实现鼠标3次连续点击触发执行，设计触发dblclick后监听click事件，如果在短时间内触发了click事件，则构成鼠标连续点击3次的效果，具体实现如下源码：

<p> 
  <button id="button">鼠标3击</button> 
</p>

js 代码

3、鼠标n击事件实现

由鼠标3击事件联想到，如果实现n次鼠标连击事件触发如何实现。想到的思路是：禁用目标对象的dblclick事件，只用click事件进行连续点击的逻辑判断和操作，在连续的短时间内满足点击n次即可触发执行，否则重新计算累加次数。具体的实现代码如下：

最后给大家分享一个jquery版的代码

到此文章就结束了，大家可以根据需要选择自己想用的代码。

以上就是JS鼠标点击事件的实现的详细内容，更多请关注Gxl网其它相关文章！