嵌套在按钮中的元素的单击事件答案

【问题标题】：Click event for Element nested within a Button嵌套在按钮中的元素的单击事件
【发布时间】：2016-10-20 05:08:48
【问题描述】：

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

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

在 Chrome 中，这会提醒“孩子”然后是“父母”，但在 IE/FF 中我们只会得到“父母”。

很明显，这可以通过多种方式解决（将按钮更改为 div、删除跨度等），但我想知道是否有办法在不更改HTML。

谢谢！

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

【问题讨论】：

听起来像是在一个浏览器中事件冒泡到顶部，而在另一个浏览器中则没有。或者类似的...
在<button> 中放置一个可点击的元素对我来说似乎很奇怪。你为什么要这样做？
对不起，但这仍然没有任何意义。 <button> 是一个单一的控件，你按下它来执行一个动作，将“子按钮”放在 <button> 中与 <button> 的本质作斗争，你的用户会讨厌你。顺便说一句，<a><button></button></a> 和 <button><button></button></button> 之类的东西是 explicitly forbidden 所以我怀疑你永远不会让它工作。你试图滥用<button> 和<button> 不会容忍它。
您希望屏幕阅读器如何处理这种奇怪的结构？我看不到点击事件与样式有什么关系。你犯了一个错误，重新考虑你的设计。
你的代码给出了undefined behaviour by definition。

标签： javascript html

【解决方案1】：

正如@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);
});

【讨论】：

指定的答案不适用于 Firefox 版本，仅适用于 Chrome 和 Safari。所以，不是通用修复。

【解决方案2】：

正如一些用户所提到的，这样嵌套按钮并不是一个好习惯，但出于教育目的，我会这样做：

HTML：

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

JS：

window.callFn = function(evt, type) {
  if (type === 'child') {
    alert(type);
  }
}

JS 小提琴： https://jsfiddle.net/4vo3arpf/4/

【讨论】：