js click events of nested elements

Question

I have a list with div items. each of them redirects to a page when I click it. Now I added a button within the div and I do not want to get redirected when I click the button (i.e. do not execute the parent divs on click event)

<div class='item' onClick="alert('div');">
... div content
    <button class='btn' onClick="alert('button');">Action</button>
</div>

Above code should only alert once when I click the button.

EDIT:

I just realized that my actual problem is even one more level up:

<a href='www.google.at'>
<div class='item' onClick="alert('div');">
    <button class='btn' onClick="alert('button');event.stopPropagation();">Action</button>
</div>
</a>

I need to prevent the href redirection when I click the button. Is there something similar to event.stopPropagation()?

This question is a duplicate of Howto: div with onclick inside another div with onclick javascript. — RobG
– RobG, Commented Jan 26, 2016 at 1:03

Mandera · Accepted Answer · 2016-01-26 01:45:04Z

10

Original answer

You can accomplish this by calling event.stopPropagation()

<div class='item' onClick="alert('div');">
    <button class='btn' onClick="alert('button');event.stopPropagation();">Action</button>
</div>

Answer to edit

Apparently you can stop the propagation to an anchor element by returning false, not sure if this is the proper way, but it works.

<a href='www.google.at'>
<div class='item' onClick="alert('div');">
    <button class='btn' onClick="alert('button');event.stopPropagation();return false;">Action</button>
</div>
</a>

edited Jan 26, 2016 at 1:45

answered Jan 26, 2016 at 0:57

Mandera

3,0873 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

thank you. It works for the click events, but I just realized that my problem is actually one more level up and related to a href. (please check my edited question)

Chris Over a year ago

I just discovered event.preventDefault(); :)

Collectives™ on Stack Overflow

js click events of nested elements

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related