admin管理员组

文章数量:1331653

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".

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.

Thanks!

PS: Tried JQuery and that has same behaviour.

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".

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.

Thanks!

PS: Tried JQuery and that has same behaviour.

Share asked Jun 17, 2012 at 6:40 ZephyrZephyr 7,8334 gold badges39 silver badges41 bronze badges 12
  • Sounds like in one browser the event bubbles to the top, in the other not. Or something like that... I'm not an expert in 'event bubbling', but that's the search term I think will yield results! – Jonathan Nicol Commented Jun 17, 2012 at 6:54
  • 6 Putting a clickable element inside a <button> seems pretty strange to me. Why are you trying to do this? – mu is too short Commented Jun 17, 2012 at 7:10
  • 4 Sorry but that still doesn't make any sense. A <button> is a single control that you push to perform an action, putting "sub-buttons" inside a <button> fights against the nature of <button>, your users will hate you. BTW, things like <a><button></button></a> and <button><button></button></button> are explicitly forbidden so I suspect that you will never get this to work. You're trying to abuse <button> and <button> won't stand for it. – mu is too short Commented Jun 17, 2012 at 17:27
  • 1 How would you expect a screen reader to deal with such a bizarre construct? I fail to see what click events have to do with styling. You're making a mistake, rethink your design. – mu is too short Commented Jun 17, 2012 at 18:05
  • 2 Your code gives undefined behaviour by definition. – Niels Keurentjes Commented Jan 7, 2014 at 10:33
 |  Show 7 more ments

1 Answer 1

Reset to default 2

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

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:

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

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

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

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

本文标签: javascriptClick event for Element nested within a ButtonStack Overflow