摘要:在JS中,针对同一DOM操作中有时会同时用到单击、双击事件(ps:单击和双击事件执行不同的函数),但通常会遇到一个问题,就是在双击的时候即执行了一次双击事件,而且还执行了两次单击事件。此类冲突在ZTree中经常遇到(下面附有案例)。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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);//展开点击的树结构    }}  

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);//展开点击的树结构    }}  

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_1264.html