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

Here is a simple example of the problem:

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

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

In Chrome this alerts "child" then "parent", but in IE/FF we only get "Parent".

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

Clearly this can be fixed in a number of ways (change button to div, remove span etc.), but I wanted to find out if there was a way to make this work (i.e. alert "child") without changing the HTML.

很明显,这可以通过多种方式修复(将按钮更改为div,删除跨度等),但我想知道是否有办法使这项工作(即警告“孩子”)而不更改HTML。

Thanks!

PS: Tried JQuery and that has same behaviour.

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

2 个解决方案

#1

As @muistooshort said, handling click events inside other click events seems unnatural. I also think you have to rethink your design.

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

That being said, you can handle a single click event on your main container and then check which element was the source of the click

话虽这么说,您可以在主容器上处理单击事件,然后检查哪个元素是点击源

This would be the way to go, considering your use case, imo:

考虑到你的用例,这将是你要走的路,imo:

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

Make the necessary checks on event.originalEvent.srcElement and act accordingly.

对event.originalEvent.srcElement进行必要的检查并相应地执行操作。

Edit: Not using JQuery, it would go like this:

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

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

#2

As mentioned by a few users, it is not good practice to nest buttons like that, but for educational purposes, I'd do it this way:

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

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 Fiddle: https://jsfiddle.net/4vo3arpf/4/

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

#1