在IE中不触发按钮上的子项上的click事件

Question

我有一个带有跨度的按钮。我在按钮上有一个click事件，在跨度上也有click事件，但是在IE11中，没有触发跨度click事件（在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>

Answer 1

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

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

Answer 2

在我的一个使用 IE 和 Button 的网站上也遇到了同样的问题。我度过了一个漫长的夜晚，因为我们在上线后立即发现了这一点。:D 当您禁用父单击事件时，您会发现什么也没有发生当您单击按钮时，永远不会触发子单击事件。这是 IE 的普遍问题。

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