我需要向bootstrap-treeview的树节点添加双击事件。插件本机方法没有双击事件功能。默认情况下,插件的节点绑定到click事件,这将导致click事件和双击事件之间的冲突。
编写测试代码。
导致冲突的代码:
问题显示:
每次触发双击事件,都会导致两次单击事件。
解决冲突的代码:
问题解决效果显示:
完美解决了单击事件和双击事件的冲突。
这里主要使用了两个HTMLDOMWindow对象中的函数,settimeout()和cleartimeout()。
在我的情况下,两次点击事件触发的时间间隔设置为300毫秒,需要根据实际情况确定。
源代码如下:
!a doctype html html head meta charset=' utf-8 ' title/title/head body div事件监视/div/body Script type=' text/JAVAScript ' src=' http : js/jquery . min . js '/Script type=' text/JAVAScript '/* $(function(){ $(' div ')。bind ('click.a ',function () {//click event $('body ')。追加(' pclick事件/p ');}) $ ('div ')。bind ('dblclick.a ',function(){//双击事件$('body ')。追加(' pdblclick事件/p ');}) $ ('div ')。bind ('mouseover。元素$(“body”)的a '、function(){//鼠标悬停事件。追加(' pmouseover event/p ');}) $ ('div ')。bind ('mouseout。' a ',function(){//鼠标移出事件$('body ')。追加(' pmouseout事件/p ');})})*/$(function(){ var timer=null;$(“div”)。绑定('点击。a '、function(){//点击事件clearTimeout(定时器);Timer=setTimeout(函数(){//在click事件中添加一个setTimeout()函数来设置时间间隔$('body ')。由click事件触发的追加(pclick事件/p );}, 300);}) $ ('div ')。bind ('dblclick.a ',function(){//双击事件clearTimeout(计时器);//在双击事件中,首先清除上一次点击事件$('body ')的时间处理。追加(' pdblclick事件/p ');}) $ ('div ')。bind ('mouseover。元素$(“body”)的a '、function(){//鼠标悬停事件。追加(' pmouseover event/p ');}) $ ('div ')。bind ('mouseout。' a ',function(){//鼠标移出事件$('body ')。追加(' pmouseout事件/p ');})})/script/html以上是jquery click和双击事件冲突的解决方案,希望对大家的学习有所帮助。