在IE浏览器中，按钮内部子元素的点击事件无法触发

Question

我有一个带有内部span的按钮。我在按钮上有一个点击事件，也在span上有一个点击事件，但是在IE11中，span的点击事件不起作用（在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>

- philr

---

你正在尝试的IE版本是哪个？ - Naga Sai A

@NagaSaiA 我正在IE11中测试这个，将把它添加到我的问题中。 - philr

在你的点击事件中不存在'e'... on("click", ".child", function(e) { alert("child"); e.stopPropagation(); }) - serverSentinel

@hungerstar 我在问题中明确写道，我想要避免将我的按钮更改为 div。 - philr

将您的按钮标签更改为 div。它不受 IE 支持。 - billybob

Answer 1

我知道问题中提到了不想使用 div 作为按钮，但是在 IE 中没有一些“脏代码”的话是无法实现的。最好的解决方案是将 button 改为 div。

这是更新后的代码： https://jsfiddle.net/ovhhdab5/

- billybob

---

最佳答案：它将正确地使<button></button>标签内的任何内容触发点击事件。 - Genesis

Answer 2

在我的一个网站上也遇到了同样的问题，与IE和按钮有关。我们发现这个问题直接影响了上线之后的使用体验，所以我经历了一个漫长的夜晚。当你禁用父级点击事件时，你会发现点击按钮时没有任何反应并且子级点击事件也不会被触发。这是IE的一个普遍问题。

可能的解决方案：为了避免/解决这个问题，只需添加一些JavaScript/jQuery代码来查找按钮被点击的坐标，并在存在/激活子级时触发子级事件即可。

- Lycidias

Answer 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上，这将导致单击事件被分派到子元素和父元素。虽然这在我的情况下不是问题，但似乎在你的情况下会出现问题，所以你需要找到一种方式来阻止事件a.冒泡和b.被分派到父级上的其他监听器。

最初的回答：https://jsfiddle.net/zLwagcmv/16/

- ecc521