js冲突怎么解决？

2023-02-21 19:48:01JavaScript06

js冲突怎么解决？,第1张

jQuery多个版本或和其他js库冲突主要是常用的$符号的问题，主要解决办法如下：

方法一：

alert( jQuery(this).text() )

})

$("pp").style.display = 'none' //使用prototype</script>

方法二：

alert( $j(this).text() )

})

$("pp").style.display = 'none' //使用prototype</script>

方法三：

})

})(jQuery) //执行匿名函数且传递实参jQuery$("pp").style.display = 'none' //使用prototype</script>

在做表单验证时我们会经常遇到blur和click冲突的情况

举个栗子：

问题：当焦点在输入框时，点击取消按钮会触发blur和click事件，导致需要点击两次取消按钮才能关闭弹窗

原因：这是因为blur事件比click事件先触发，而 javascript为单线程，同一时间只能执行处理一个事件 ，所以当blur处理程序时，导致其后续click事件并不会执行

解决方案1：如果click事件比blur事件先触发就没有问题了，所以可以给blur事件延迟触发

解决方案2：将click事件改为mousedown事件，让其优先于blur事件执行（缺点是用户体验不好，鼠标按下便触发了事件）

解决方案3：给按钮添加一个mousedown事件，在其中执行event.preventDefault()阻止浏览器默认事件，这样点击按钮时输入框就不会失去焦点了

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].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日

去首页

# 上一篇：电脑上文件压缩怎么弄

# 下一篇：css属性对话框的类型主要用于修饰什么

推荐阅读

热门文章

最新发布

标签列表

js冲突怎么解决？

给您推荐相同类型的内容：