在 IE 中未触发的子按钮上的单击事件答案

【问题标题】：click event on child inside button not firing in IE在 IE 中未触发的子按钮上的单击事件
【发布时间】：2017-05-03 20:27:42
【问题描述】：

我有一个按钮，里面有一个跨度。我在按钮上有一个点击事件，在跨度上也有一个点击事件，但在 IE11 中，跨度点击事件没有触发（在 Chrome/Firefox 中有效）。在不从按钮更改为 div 的情况下，是否有任何解决方法？

我知道将我的按钮更改为 div 会起作用（正如其他问题中所回答的那样），我想避免这样做。

https://jsfiddle.net/asjo8ox0/2/

$(document)
  .on("click", ".parent", function() {
    alert("parent");
  })
  .on("click", ".child", function(e) {
    alert("child");
    e.stopPropagation();
  })

.parent {
  width: 200px;
  height: 200px;
  background-color: cornflowerblue;
}

.child {
  width: 100px;
  height: 100px;
  background-color: white;
  display: none;
}

.parent:hover .child {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="parent">
  <span class="child"></span>
</button>

【问题讨论】：

您正在尝试的 IE 版本？
@NagaSaiA 我正在 IE11 中对此进行测试，将其添加到我的问题中
e 在您的点击事件中不存在... on("click", ".child", function(e) { alert("child"); e.stopPropagation(); } )
@serverSentinel 是的，刚刚解决了这个问题，谢谢，但这不是问题
将您的按钮标签更改为 div。 IE 不支持它。

标签： javascript jquery html css

【解决方案1】：

我知道问题中提到了他想避免使用div 作为按钮。但是如果不做一些脏代码，就不可能在IE 中实现它。最好的解决方案是将button 更改为div。

这是更新后的小提琴：https://jsfiddle.net/ovhhdab5/

【讨论】：

最佳答案，它将正确地使标记内的任何内容触发点击事件。

【解决方案2】：

在我的一个带有 IE 和 Buttons 的网站上遇到了同样的问题。我度过了一个非常漫长的夜晚，因为我们在上线后直接发现了。:D 当您禁用父单击事件时，您将看到没有任何反应，并且当您单击按钮时永远不会触发子单击事件。这是 IE 的普遍问题。

一种可能的解决方案：为了避免/解决问题：只需添加几行 javascript/jquery 即可了解单击按钮的坐标以及何时存在/存在子事件，然后改为触发子事件。

【讨论】：

【解决方案3】：

你可以试试这样的：

parent.addEventListener("click", function(e) {
     var x = e.clientX, y = e.clientY,
     elementMouseIsOver = document.elementFromPoint(x, y);

     //Only run this on IE
     if (/MSIE|Trident/.test(window.navigator.userAgent);) {
         elementMouseIsOver.click()
     }
})

这将捕获点击事件，并将它们分派给正确的孩子。

但请注意：仅在 IE 上，这将导致点击事件同时发送到子级和父级。虽然这在我的情况下不是问题，但它似乎会出现在你的情况下，所以你需要找到一种方法来阻止事件发生。冒泡和b。被分派给父级上的其他侦听器。

https://jsfiddle.net/zLwagcmv/16/

【讨论】：