Question

以下是问题的一个简单示例：

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

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

显然，这可以通过多种方式修复（将按钮更改为div，删除跨度等），但我想知道是否有办法使这项工作（即提醒“孩子”）而不更改HTML。

谢谢！

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

Answer 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); });

Answer 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/

单击嵌套在Button中的Element的事件

2 个答案: