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