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屋！