js给某个text标签添加鼠标的双击事件

JavaScript017

js给某个text标签添加鼠标的双击事件,第1张

js 的单双击事件同时存在会有一个问题：双击事件会同时触发单击事件，两个事件存在冲突。

我们加一个延迟时间就能很好的解决这个问题。

原理： 当接收到第一个点击时，我们先把单击事件存储在这个是全局变量 click_store 里，如果 0.3 秒内没有接收到双击事件，就去执行它，如果接收到了，我们把它清理掉，然后去执行双击事件。setTimeout() 可以实现延迟执行。

1、如图首先在一个文件夹下创建index.html文件。

2、然后用可编辑文本文件的软件打开index.html文件，index.html的初始内容如图。

3、js的鼠标事件主要有onclick：单击事件ondbclick：双击事件onmouseover：鼠标移入事件onmouseout：鼠标移出事件onmousedown：鼠标按下事件onmouseup：鼠标松开事件。首先实现鼠标左键单击和双击的js代码如图。

4、编辑完index.html文件后，用浏览器打开index.html文件，效果如图。当鼠标左键单击span时显示"触发鼠标单击事件"，双击span时显示"触发鼠标双击事件"。

5、接着实现鼠标的移入和移出事件。如图修改index.html文件。

6、最后实现鼠标的点下和松起事件。如图修改index.html文件。

7、修改完index.html文件后，用浏览器打开index.html文件，效果如图。

onclick是单击事件，ondbclick是双击事件，这两个不冲突的好吧。最简单的，你设置单击事件的延时，在时间内再次单击就是双击事件，屏蔽掉单击；若是在时间内没有再点击，就做单击事件处理