问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

事件传播过程中如何取消特定的事件?

头像
changli
    1.2k460156
    <div id="A">
  <div id="B">
    <div  id="C"></div>
  </div>
</div>

    对应一个事件,假如是 click。A, B, C 都针对该事件绑定了多个监听函数。对于 B 元素,自身内置了一些监听函数,这些内置的监听函数没法获取,但可以为 B 元素增加新的监听函数。有没有方法不执行 B 元素的内置监听函数,但是 A, C 中的监听函数依然可以执行

    前端javascript
    阅读 1.2k
    avatarAI BotBETA

    在JavaScript中，事件传播（Event Propagation）遵循三个阶段：捕获（Capturing）阶段、目标（Target）阶段和冒泡（Bubbling）阶段。默认情况下，事件是从最外层的元素开始捕获，直到目标元素，然后在目标元素上处理，最后冒泡回最外层元素。

    要实现在不执行B元素的内置监听函数的同时，仍然允许A和C中的监听函数执行，你可以使用事件对象的stopImmediatePropagation()方法。但是，需要注意的是，stopImmediatePropagation()会阻止当前事件在目标元素上的其他所有事件监听器被调用，并且会阻止事件进一步冒泡。然而，由于你无法直接控制或访问B元素的内置监听器，你不能直接阻止它们执行，但你可以通过控制你添加的监听器的行为来影响整体行为。

    不过，如果你的目标是仅仅阻止B元素上你自己添加的事件监听器（而不是那些“内置”的、你无法访问的监听器），同时允许事件继续冒泡到A和C，那么你实际上不需要做特别的处理，因为即使你在B上添加了监听器并使用stopImmediatePropagation()，这也不会影响A和C上的监听器，因为stopImmediatePropagation()只阻止同一事件在相同元素上的其他监听器以及后续冒泡阶段。

    但如果你确实需要一种方式来绕过B元素的内置监听器，而你又无法修改它们，你可以考虑在捕获阶段（在B之前）处理事件，并决定是否需要阻止事件的进一步处理。然而，由于你无法直接修改内置监听器，这通常不是一个可行的选项。

    在这种情况下，一个可能的解决方案是，如果你能够控制B元素上添加的事件监听器的顺序，确保你的监听器在内置监听器之前或之后执行，并且在你的监听器中根据需要处理事件，但这仍然不会阻止内置监听器的执行。

    如果内置监听器确实需要被“绕过”或“忽略”，而你又没有控制权，那么这通常是一个设计上的问题，可能需要重新考虑事件处理的结构或逻辑。

    总结一下，没有直接的方法可以阻止B元素的内置监听器执行，同时又不影响A和C的监听器，除非你有能力修改或替换B元素上的这些内置监听器。你可能需要重新审视你的事件处理逻辑，看看是否有其他方式来实现你的需求。

    3 个回答
    得票最新
    头像
    Seven
      623116
      沙特阿拉伯

      使用事件代理模式

      事件代理通过将事件监听器绑定到父元素上来处理子元素的事件，可以更灵活地管理事件的处理。

      示例代码

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling Example</title>
    <style>
        #A, #B, #C {
            padding: 20px;
            border: 1px solid black;
            margin: 10px;
        }
        #A { background-color: lightblue; }
        #B { background-color: lightgreen; }
        #C { background-color: lightcoral; }
    </style>
</head>
<body>
    <div id="A">
        A
        <div id="B">
            B
            <div id="C">C</div>
        </div>
    </div>

    <script>
        // A 和 C 元素的监听函数放在父元素 A 上进行代理处理
        document.getElementById('A').addEventListener('click', function(event) {
            if (event.target.id === 'A') {
                console.log('A element clicked');
            } else if (event.target.id === 'C') {
                console.log('C element clicked');
            }
        });

        // B 元素的自定义监听函数
        document.getElementById('B').addEventListener('click', function(event) {
            event.stopImmediatePropagation(); // 阻止 B 元素内置监听函数执行
            console.log('Custom B element listener');
        });
    </script>
</body>
</html>

      逻辑解释

      1. 事件代理：

        • 将 A 和 C 元素的监听函数绑定到父元素 A 上，通过检查 event.target.id 来判断事件的触发源。
        • 这样可以确保在点击 A 或 C 元素时，监听函数会正确触发。

      2. B 元素的自定义监听函数：

        • 在 B 元素上直接绑定自定义监听函数，并使用 event.stopImmediatePropagation() 阻止 B 元素的内置监听函数执行。
          你看一下这个是否能实现你的要求
      头像
      linong
        29.2k1163128
        在 JavaScript中，事件传播（Event Propagation）遵循三个阶段：捕获（Capturing）阶段、目标（Target）阶段和冒泡（Bubbling）阶段。默认情况下，事件是从最外层的元素开始捕获，直到目标元素，然后在目标元素上处理，最后冒泡回最外层元素。

        所以如果回调的内部不能处理的话，那么只能在捕获和冒泡里面想办法，比如说阻止冒泡。但是这种方案会导致A也被阻止。

        如果回调内部可以处理的话，那么你只需要控制触发顺序。然后内部自定义开关来实现跳过逻辑。

        当然，你还可以写的更加复杂，通过事件委托，统一处理。这样就是统一的方法了

        头像
        乔治
          12.4k1329

          image.png

          <!DOCTYPE html>
<html>
<head>
  <title>事件传播示例</title>
</head>
<body>
  <div id="A" style="padding:50px; background-color:lightblue;">
    A
    <div id="B" style="padding:50px; background-color:lightgreen;">
      B
      <div id="C" style="padding:50px; background-color:lightcoral;">
        C
      </div>
    </div>
  </div>

  <script>
    document.getElementById('A').addEventListener('click', function() {
      console.log('A 被点击');
    });

    function builtInListener() {
      console.log('B 的内置监听器被触发');
    }
    document.getElementById('B').addEventListener('click', builtInListener);
    document.getElementById('B').addEventListener('click', function() {
      console.log('B 的新监听器被触发');
    });
    document.getElementById('C').addEventListener('click', function() {
      console.log('C 被点击');
    });

    document.getElementById('B').addEventListener('click', function(event) {
      console.log('B 的捕获阶段监听器被触发');
     
      // ...
      event.stopImmediatePropagation();
    }, true); 
  </script>
</body>
</html>
          查看全部 3 个回答
          推荐问题
          宣传栏