1、新建一个html文件,命名为test.html,
2、在test.html页面中,使用button标签创建一个按钮,用于下面双击该按钮时触发双击事件。
3、在test.html页面中,给button按钮绑定ondblclick双击事件,当按钮被双击时,执行go()函数。
4、在test.html页面中,使用script标签标记js代码执行区域,
5、在js内,使用function创建一个go()函数,
6、在go()函数内,使用alert()方法弹出文字内容,例如,弹出这是一个双击按钮文字。
7、在浏览器打开test.html文件,双击按钮,弹出这是一个双击按钮文字。
js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突。我们加一个延迟时间就能很好的解决这个问题。
原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 click_store 里,如果 0.3 秒内没有接收到双击事件,就去执行它,如果接收到了,我们把它清理掉,然后去执行双击事件。setTimeout() 可以实现延迟执行。
只需要把事件类型换为ondblclick即可实现:document.getElementById('id1').ondblclick = function(){ }
这也是我听了黑马程序员的公开课里面讲的