IE 中的奇怪事件捕获答案

【问题标题】：The weird event capturing in IEIE 中的奇怪事件捕获
【发布时间】：2014-11-11 08:58:28
【问题描述】：

我只是在 IE10 和 Chrome 浏览器上测试相同的代码。

<div id='a'><input onclick="console.log('a');"/></div>
<div id='b'><button onclick="alert('b');"/></div>`

我在两个不同的 div 标签中放置了两个不同的标签，即输入和按钮。两个元素（输入，按钮）都有 onclick 属性。

我做的很简单

我在 IE10 和 Chrome 上试过这个。

在 chrome 浏览器中，附加在按钮上的事件处理程序尚未执行。但在按钮上附加的 IE 事件处理程序已执行。

谁能告诉我为什么会发生这种灾难

【问题讨论】：

【解决方案1】：

IE 像脑残男孩一样处理“输入”按键。在 IE 中的 textbox/input/etc 中按 Enter 将单击它附近完全不相关的按钮。是唯一采用这种方法的浏览器。

这与IE选择提交按钮的算法有关。即使没有表单标签，您的按钮也会被视为一个。

<button onclick="alert('b');"/> has default type = "submit"

您可以通过使用按钮一更改类型来更改它。

<button type="button" onclick="alert('b');"/>

【讨论】：

【解决方案2】：

此行为与 Chrome 根据 HTML5 规范正确实现的隐式表单提交有关。您可以通过规范here。

简而言之，当文本字段被聚焦时，“按 Enter 键”会调用浏览器控制的隐式表单提交，而后者又会在“表单”元素下查找第一个提交按钮并调用附加的处理程序。
在您的情况下，“按钮”元素默认为“提交”类型，但由于它不是“表单”元素的后代，因此不会被调用。
您可以假设当前的 IE 行为不符合规范。

【讨论】：