Question

我有一个带有跨度的按钮。我在按钮上有一个点击事件，我在跨度上也有一个点击事件，但在IE11中，跨度点击事件没有触发（在Chrome / Firefox中有效）。如果没有从按钮更改为div，有没有解决方法？

我知道将我的按钮更改为div会有效（如其他问题所述），我想避免这样做。

$(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

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

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

Answer 2

在我的一个网站上使用IE和按钮出现同样的问题..而且我度过了一个漫长的夜晚，因为我们在生命之后直接发现..：D 当您禁用父点击事件时，您将看到没有任何反应，并且当您单击按钮时，永远不会触发子点击事件。这是IE的一般问题。

一个可能的解决方案：避免/解决问题：只需添加一些javascript / jquery行就可以找到点击按钮的坐标，以及当孩子有/然后触发子事件时。

Answer 3

要获得预期结果，请添加以下元标记

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Answer 4

您也许可以尝试这样的事情：

updated_by

这将捕获单击事件，并为它们分配正确的子项。

但是请注意：仅在IE上，这将导致Click事件被调度到子级和父级。虽然这对我而言不是问题，但看起来就像在您的情况一样，因此您将需要找到一种方法来停止该事件。起泡和b。被分派给父母的其他听众。

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

在IE中点击按钮内未触发的事件

4 个答案: