问题标签 [event-capturing]

假设我有一个 id 为“edit-resource”的表单，稍后将出现在模态对话框中。

我像这样将一个侦听器附加到文档，这样无论模态表单被回发和替换多少次，它都会捕获事件。

当我提交表单时，事件处理程序按预期运行，但是到断点被击中时......帖子已经击中服务器（也有一个断点）。提交事件应该是可取消的（即通过返回 false），但如果它已经被处理程序的第一行击中服务器，则不能取消此类事件。是什么导致了这个问题？

我正在寻找在 React.js 中处理冒泡和捕获的示例。我找到了一个 JavaScript，但我很难找到 React.js 的等价物。

我将如何为 React.js 中的冒泡和捕获创建一个示例？

我试图弄清楚，AngularJS 2 中所谓的更改检测是否实际上对应于从 ReactJS 中的捕获阶段和冒泡阶段获取事件。是这样吗？任何人都可以提供一个 AngularJS 2 的例子吗？

ReactJS 示例：

据我了解，DOM Level 2 事件处理按以下顺序工作：

1. 从顶部 HTML 元素一直捕获到目标之前
2. 目标本身
3. 一直冒泡回到顶部的 HTML 元素

示例位于：https
://jsfiddle.net/uwe5dmxw/ （我将在此问题末尾包含代码）

但是，如果我在当前的 Google Chrome、Firefox、Safari 甚至 IE 11 上单击“子”元素（最低级别的后代），我会按以下顺序得到一致的结果：

1. HTML 捕获
2. 身体捕捉
3. 父捕获
4. 目标冒泡
5. 目标捕获
6. 父冒泡
7. 身体冒泡
8. HTML 冒泡

即，“目标捕获”和“目标冒泡”的顺序颠倒了。

据我了解，虽然 DOM Level 2 表示事件仅到达目标一次，但大多数浏览器将其实现为两次到达，一次是在事件捕获期间，一次是在事件冒泡期间。但事实是，为什么“目标捕获”和“目标冒泡”是相反的？

代码：（不过只是个demo，没必要不用看）

JavaScript：

我正在开发一个项目，在该项目中，我将一个 eventListener 绑定到一个事件<audio>元素play，另一个 eventListener 绑定到同一事件的父元素。我注意到孩子的回调总是被调用，但父母的回调永远不会被调用。

如果我使用 的捕获模式addEventListener()，那么两个回调都被正常调用 - 首先是父级，然后是子级。

为了进一步调查，我编写了一段代码，发现 play 事件并没有返回给父级。

这是输出：

父单击捕获
子单击捕获
子单击气泡
父单击气泡
父播放捕获
子播放捕获
子播放气泡

有谁知道这种行为是否仅针对播放事件，或者是否有其他事件不进入气泡阶段（或捕获阶段）？

我在我的项目中有一个窗口单击 eventListener 和 div 元素上的一些单击事件。如果我单击 div，则此 div 元素上的单击事件（正确）并且窗口单击 eventListener 触发（不正确）。

我可以冒泡窗口单击 eventListener 不触发事件的 div 元素吗？

为了更好地演示jsfiddle：

我希望有人能帮助我。

我目前正在研究 React Events，我注意到一个关于事件气泡和捕获的不寻常问题。

如果我有一组嵌套的 div 标签，它们都有自己的 onClick/onClickCapture，那么这将按预期工作。事件触发“向下/向上” DOM 树。

但是，如果其中一个 Div 是 React.Component，它不会捕获事件。我相信这是设计使然，React 的立场是组件应该始终是“独立的”，因此不应该处理其他组件引发的事件（即使它们是嵌套的）。

谁能告诉我我的想法是否正确？

我创建了一个演示。在演示中，如果将组件“Top”替换为标准 div，它将按预期冒泡并捕获。

http://codepen.io/anon/pen/KNdBYW?editors=0010

Q) 我的观点是，每当我在两种情况下都将 addEventListener 的最后一个参数设置为 true 或 false 时，事件目标 (e.target) 保持不变，即 img，在下面的代码中你可以看到我将最后一个参数设置为 true，这意味着捕获但仍在 console.log 气泡中是真的，这让我很困惑

让我们考虑以下 html

应用事件

所以现在，我们已经应用了事件，当我们点击输出时，正如预期inner element的那样，应该如下

外拍！
内部点击！
外点击！

但是，如果我们inner span从上面的 html 中删除，那么在冒泡阶段之后似乎会触发捕获阶段，如下所示

外点击！
外拍！

谁能解释为什么会这样？

简短的问题是：event.preventDefault()无论您在哪个元素上设置事件处理程序，只要该元素是“捕获”、“at”和“冒泡”阶段的一部分，你能做到吗？

我想让页面上的所有内容都无法选择，所以起初我想做

这样当它在捕获阶段的最开始时，它不会传播到页面内容元素，那么不会进行任何选择。

但看起来即使它停止传播，默认操作仍会执行。

然后，我尝试在捕获阶段执行此操作：

然后将 更改true为false以使处理程序在冒泡阶段被调用：

它也有效。

我曾经认为“preventDefault”是每个元素。

那么，在整个捕获阶段、at 阶段和冒泡阶段，您是否可以调用ev.preventDefault()它并且它是完全相同的事件对象，并且无论您将处理程序设置在哪个元素上，您都可以阻止默认操作，只要元素在“捕获”、“在”和“冒泡”循环中？