JS中双击和单击事件冲突的解决方法及案例
问题前置条件:
在JS中,针对同一DOM操作中有时会同时用到单击、双击事件(ps:单击和双击事件执行不同的函数),但通常会遇到一个问题,就是在双击的时候即执行了一次双击事件,而且还执行了两次单击事件。此类冲突在ZTree中经常遇到(下面附有案例)。
解决办法:
想要解决两个事件冲突,需要对单击事件进行延时,如果在此延时中又监测到单击事件,那么认为此两次单击属于一个双击事件,则只执行双击事件,并第一时间将延时定时器清理,以防止第二次单击时生效。
结合zTree插件案例:
三级树形结构,当单击任何一级树结构时回显数据,当双击时展开所点击的树结构
function initEventLbTree() { var eventSetting = { view : { dblClickExpand : true }, data : { key : { name : 'text' }, simpleData : { enable: true, idKey: "id", pIdKey: "pid", rootPId:null, } }, callback : { onClick : OnClick,//单击事件 onDblClick: OnDblClick//双击事件 } }; createTree("incDealName","/groupAction/getGroupsAndUserByCtis",{geogIds:$("#geogid").val(), flowCode:$("#processType").val()},null,null,null,eventSetting);//创建树结构 } var clickFlag = null;//是否点击标识(定时器编号) function OnClick(e,treeId, treeNode) { if(clickFlag) {//取消上次延时未执行的方法 clickFlag = clearTimeout(clickFlag);//清除定时器,防止第二次点击生效 } clickFlag = setTimeout(function() {//单击事件,回显点击项到输入框 var nodes; var parentsNode; var grandParentNode; loadClickNodes(e, treeId, treeNode); var zTree = $.fn.zTree.getZTreeObj(treeId); nodes = zTree.getSelectedNodes(); parentsNode = nodes[0].getParentNode(); grandParentNode = parentsNode.getParentNode(); if (nodes[0] == null) { return; } else { parentsNode = nodes[0].getParentNode(); if (parentsNode == null) { var incDealName = nodes[0].text; s etInputValue(incDealName,nodes[0].id); } else { grandParentNode = parentsNode.getParentNode(); if (grandParentNode == null) { var incDealName = parentsNode.text + "/" + nodes[0].text; setInputValue(incDealName,nodes[0].id); } else { var incDealName = grandParentNode.text + "/" + parentsNode.text + "/" + nodes[0].text; setInputValue(incDealName,nodes[0].id); } } } $("#" + treeId).trigger("selected"); }, 300);//延时300毫秒执行} function OnDblClick(e, treeId, treeNode) {//双击事件:清除定时器,展开点击的树结构 if(clickFlag) {//取消上次延时未执行的方法 clickFlag = clearTimeout(clickFlag);//清除定时器,防止第二次点击生效 } var treeObj = $.fn.zTree.getZTreeObj(treeId); var nodes = treeObj.getSelectedNodes(); if (nodes.length>0) { treeObj.expandNode(nodes[0], true, true, true);//展开点击的树结构 }}