javascript - 同一元素绑定多次click,如何阻止其他click
本文介绍了javascript - 同一元素绑定多次click,如何阻止其他click的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
要实现的功能类似于chrome开发工具的选择页面元素
触发此功能后
$('body').on('mouseover', function(e){//显示选取范围...});
$('body').on('click', function(e){
e.preventDefault();
$(this).off('mouseover');
// 选择当前元素
console.log(e.target);
....
});
问题是页面上有些元素已经绑定了click,当实现上述功能的时候会触发原有的click事件,在不破坏原有功能的前提下,如何阻止原有click的触发。
补充一下:
1.click只是为了结束上面mouseover的选择,得到mouseover最后所在的元素并进行处理;如果有其他方法也可以;
2.此功能以插件形式出现,原网页内容不可控
解决:
采纳@supreme的方法,把click事件写到根节点的捕获阶段并阻止冒泡,能解决绝大多数情况。
bug:原网页同样有绑到根节点捕获阶段的事件,就会失效
解决方案
首先要有一个开关,就像chrome调试一样,你要先点一下,才能选择元素,要不他怎么知道你点他是要触发事件,还是要选择他这个元素。
所以,开关关的时候不执行插件方法,那就是点什么就触发什么事件。
开关开的时候就是执行插件方法,大概原理就是这样,复制看一下就知道了
a {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid red;
margin-right: 10px;
}
<a onclick="console.log(1)" id="a" class="cho"></a>
<a onclick="console.log(2)" id="a" class="cho"></a>
<a onclick="console.log(3)" id="a" class="cho"></a>
<a onclick="console.log(4)" id="a" class="cho"></a>
var ass = document.getElementsByClassName('cho');
var el;
for(var i = 0; i < ass.length; i++) {
(function(i) {
ass[i].onmouseover = function() {
console.log(ass[i])
el = ass[i];
}
})(i)
}
document.documentElement.addEventListener('click',function(e){
e.stopPropagation();
console.log(el)
},true)
这篇关于javascript - 同一元素绑定多次click,如何阻止其他click的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文