javascript - 事件传播过程中如何取消特定的事件?
<div id="A">
<div id="B">
<div id="C"></div>
</div>
</div>对应一个事件,假如是 click。A, B, C 都针对该事件绑定了多个监听函数。对于 B 元素,自身内置了一些监听函数,这些内置的监听函数没法获取,但可以为 B 元素增加新的监听函数。有没有方法不执行 B 元素的内置监听函数,但是 A, C 中的监听函数依然可以执行
共有3个答案
在 JavaScript中，事件传播（Event Propagation）遵循三个阶段：捕获（Capturing）阶段、目标（Target）阶段和冒泡（Bubbling）阶段。默认情况下，事件是从最外层的元素开始捕获，直到目标元素，然后在目标元素上处理，最后冒泡回最外层元素。
所以如果回调的内部不能处理的话，那么只能在捕获和冒泡里面想办法，比如说阻止冒泡。但是这种方案会导致A也被阻止。
如果回调内部可以处理的话，那么你只需要控制触发顺序。然后内部自定义开关来实现跳过逻辑。
当然，你还可以写的更加复杂，通过事件委托，统一处理。这样就是统一的方法了
使用事件代理模式
事件代理通过将事件监听器绑定到父元素上来处理子元素的事件，可以更灵活地管理事件的处理。
示例代码
<!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>逻辑解释
事件代理：
- 将
A和C元素的监听函数绑定到父元素A上，通过检查event.target.id来判断事件的触发源。 - 这样可以确保在点击
A或C元素时，监听函数会正确触发。
- 将
B 元素的自定义监听函数：
- 在
B元素上直接绑定自定义监听函数，并使用event.stopImmediatePropagation()阻止B元素的内置监听函数执行。
你看一下这个是否能实现你的要求
- 在
在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元素上的这些内置监听器。你可能需要重新审视你的事件处理逻辑，看看是否有其他方式来实现你的需求。
-
问题内容： 给出以下简单的网络服务器代码： 提交POST或FILE时，我的on data函数被触发一次或多次或多次。有时（例如发送了一个巨大的大文件）， 我想在发生数据事件时取消此操作并向用户触发on end函数 （稍后，我将显示“您的帖子/文件太大”）。我该怎么做？ 问题答案： 正确的，符合规范的操作仅是尽早发送HTTP 413响应- 也就是说，一旦您检测到客户端发送的字节数超过了您想要处理的字
-
问题内容： 我试图检测包含多个其他组合的Composite控件上的单击事件。我试过了： 但是该事件永远不会触发。我假设当鼠标事件发生在孩子身上时，它将沿着链条传播，但是不会发生。我该怎么做呢？ 问题答案： 在SWT中，一般规则是事件 不 传播。对此的主要例外是遍历事件的传播-描述起来非常复杂。 最简单的回答你的问题是，你必须将监听器添加到 所有 的你的孩子- 递归 ！ 例如这样 如上所示，找到了单
-
问题内容： 我想在事件发生后的10秒钟内运行一段代码，但是我希望能够取消它，这样，如果在这10秒钟之前发生了某些事情，那么经过10秒钟后该代码将无法运行。 我一直在使用它，但是它不能取消： 我该怎么做？ 问题答案： 试试看（Swift 2.x，请参阅下面有关Swift 3的David的回答）：
-
使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。off()方法根据传入参数的不同，有不同的实现逻辑。 version added: 2.0.0 .off( event , selector , handler ) event Type: String 需取消绑定的事件名称，例如：'tap' selector Type: String 选择器 handler Type: Fun
-
问题内容： 我想做的只是删除我在日历中保存的内容，而不是删除日历中已经存在的所有内容。为此，我使用以下代码。但是它将删除日历的所有内容。那么谁能告诉我如何预防呢？ 因此，我要删除的仅是我输入的条目。 删除活动 问题答案： 从日历中读取数据后，只需尝试一下即可。 向日历添加单次事件 要将条目添加到特定日历，我们需要配置一个日历条目以使用ContentValues进行插入，如下所示： 每个事件都需要绑
-
我有多个自定义技能意图。我想处理取消所有自定义意图的事件。我怎么能得到取消被调用。 我们如何在node JS Alexa中处理这个问题