JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018-06-07 11:17
866 查看
本文实例讲述了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法。分享给大家供大家参考,具体如下:
最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick;这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了,代码如下:
<script type="text/javascript"> var clickTimer = null; function _click(){ if(clickTimer) { window.clearTimeout(clickTimer); clickTimer = null; } clickTimer = window.setTimeout(function(){ // your click process code here alert("你单击了我"); }, 300); } function _dblclick(){ if(clickTimer) { window.clearTimeout(clickTimer); clickTimer = null; } // your click process code here alert("你双击了我"); } </script> <button onclick="_click();" ondblclick="_dblclick();">单击或双击我</button>
处理思想就是:利用定时器延迟执行onclick事件,这样在双击过程中会取消中途触发的单击事件。
PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- javascript中onclick(this)用法介绍
- js给onclick事件赋值,动态传参数实例解说
- JavaScript给按钮绑定点击事件(onclick)的方法
- javascript 动态改变onclick事件触发函数代码
- IE8的JavaScript点击事件(onclick)不兼容的解决方法
- js动态添加onclick事件可传参数与不传参数
- js修改onclick动作的四种方法(推荐)
- js函数中onmousedown和onclick的区别和联系探讨
- js onclick事件传参讲解
- 代码触发js事件(click、change)示例应用
- JavaScript中click和onclick本质区别与用法分析
相关文章推荐
- onClick 事件 和 onDblClick 事件并存的解决方法
- onClick 事件 和 onDblClick 事件并存的解决方法
- 通过原生JS实现为元素添加事件的方法
- JS实现循环给元素绑定事件的几个常用方法
- js实现默认或者触发一个事件选中元素内容的方法
- js 动态给元素添加、移除事件的实现方法
- 通过原生JS实现为元素添加事件的方法
- JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
- 用JS实现一个表单多个按钮的方法,两个onclick事件处理
- onClick和onDblClick并存的两种解决方法
- iScroll4 禁止select等页面元素默认事件的解决方法 转
- JS调用form的方法submit直接提交form的时候,submit事件不响应解决办法
- js实现运动logo图片效果及运动元素对象sportBox使用方法
- Gallery与imageView的onClick事件冲突解决方法
- iScroll4 禁止select等页面元素默认事件的解决方法
- Android onClick事件三种实现方法
- Android中button实现onclicklistener事件的两种方法
- 编写js扩展方法实现判断一个数组中是否包含某个元素
- 解决TextBox中, JS方法(DatePicker)改变Text内容后, 无法触发OnTextChanged事件的问题