javascript - 嵌套在按钮中的元素的单击事件

这是一个简单的问题示例:

<body>
  <button id="parent"  onclick="alert('parent')">
      <span id="child" onclick="alert('child')">Authenticate</span>
  </button>
</body>

在 Chrome 中，这会提示“child”然后是“parent”，但在 IE/FF 中我们只会得到“Parent”。

显然，这可以通过多种方式解决(将按钮更改为 div、删除 span 等)，但我想知道是否有一种方法可以在不更改HTML。

谢谢!

PS:试过 JQuery 并且具有相同的行为。

最佳答案

正如@muistooshort 所说，在其他点击事件中处理点击事件似乎不自然。我还认为您必须重新考虑您的设计。

也就是说，您可以在主容器上处理一次单击事件，然后检查哪个元素是单击的来源

这将是要走的路，考虑到您的用例，imo:

$('your-button-container').click(function(event){
    console.log(event.originalEvent.srcElement);
});

对 event.originalEvent.srcElement 进行必要的检查并采取相应的行动。

编辑: 不使用 JQuery，它会像这样:

yourButtonContainer.addEventListener(function(event){
    console.log(event.srcElement);
});

关于javascript - 嵌套在按钮中的元素的单击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11069410/