问题前置条件：
在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].texts
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].textsetInputValue(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)//展开点击的树结构
}}
登录后复制
乒乓球桌求转让,价钱可议
精选推荐
广告
解决双击事件和单击事件绑定同一个元素的冲突
1786阅读·1评论·1点赞
2019年11月27日
元素拖拽异常以及与点击事件冲突解决方法
1307阅读·0评论·1点赞
2021年7月27日
JS中解决单击双击事件的冲突的问题
82阅读·0评论·0点赞
2022年12月3日
【jQuery】jQuery双击事件与单击事件的冲突解决
3843阅读·0评论·2点赞
2016年10月21日
JS事件汇总
2343阅读·0评论·3点赞
2022年6月29日
ztree显示
495阅读·0评论·0点赞
2017年5月31日
方舟生存进化版公测来了！不肝不氪，轻松出SSR！
精选推荐
广告
双击事件（dblclick）时，不触发单击事件(click)
1799阅读·1评论·1点赞
2018年12月26日
鼠标双击事件
4646阅读·0评论·0点赞
2013年5月12日
JS中解决单击双击事件的冲突
1324阅读·0评论·0点赞
2022年1月10日
前端单击事件与双击事件冲突问题解决
325阅读·0评论·0点赞
2022年11月22日
js 实现单击、双击事件
1.0W阅读·0评论·2点赞
2021年3月3日
关于ztree双击
1154阅读·0评论·0点赞
2012年7月5日
Js操作树节点自动折叠展开
4338阅读·0评论·0点赞
2014年4月23日
zTree学习笔记二：展开树和收起树
1.3W阅读·1评论·2点赞
2017年6月12日
zTree使用时expandAll()折叠全部方法和expandNode()同时使用时节点显示问题记录
1.7W阅读·1评论·0点赞
2017年11月13日
node-expand_使用dotenv-expand掌握Node.js上的环境变量
2405阅读·0评论·1点赞
2020年9月17日
JS 之Node节点的 属性、方法 &获取
2.3W阅读·1评论·5点赞
2016年10月22日
js的node对象(节点的使用)
3410阅读·0评论·3点赞
2018年3月16日
去首页
看看更多热门内容
var lastFaqClick=nullvar expandIndex = 1//设置展开一个
window.onload=function(){
var faq=document.getElementById("faq")
var dls=faq.getElementsByTagName("dl")
for (var i=0,dldl=dls[i]i++){
var dt=dl.getElementsByTagName("dt")[0]//取得标题
dt.id = "faq_dt_"+(Math.random()*100)
dt.onclick=function(){
var p=this.parentNode//取得父节点
if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
var dds=lastFaqClick.parentNode.getElementsByTagName("dd")
for (var i=0,dddd=dds[i]i++)
dd.style.display='none'
}
lastFaqClick=this
var dds=p.getElementsByTagName("dd")//取得对应子节点，也就是说明部分
var tmpDisplay='none'
if (gs(dds[0],'display')=='none')
tmpDisplay='block'
for (var i=0i<dds.lengthi++)
dds[i].style.display=tmpDisplay
}
if(i == expandIndex){
dt.onclick()
}
}
}
//你是页面之间传递参数 还是你用脚本点击按钮等传递参数?
//页面传递的话你直接修改expandIndex值 如果用js修改expandIndex值你再重新调用这函数 也就是重新绑定点击事件 方法很多你随便想想就会有的
