JS中双击和单击事件冲突的解决方法及案例

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