15

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

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

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

显然，这可以通过多种方式解决（将按钮更改为 div、删除跨度等），但我想知道是否有办法在不更改 HTML 的情况下使这项工作（即警报“孩子”）。

谢谢！

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

4

2 回答 2

2

正如@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);
});
于 2014-10-02T15:14:25.147 回答
0

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

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/

于 2016-10-19T21:08:48.953 回答