CODEWITHSUNDEEP
javascriptdom
user2039981
user2039981

Reputation:

Javascript - Prevent Child's OnClick Firing Parent's OnClick - Without JQuery

I have two elements, like this:

var parent = document.getElementById("el");
var child = parent.children[0];

and then a eventListener:

parent.addEventListener("click", function() {
    alert("Hello World!")
});

and the problem is that when you click the child, the parents click event will be fired.

I want only when you click on the parent to fire the alert, not when you click on the child.

I am not using JQuery and won't.

I have searched on google, and all results uses e.stopPropogation which is JQuery.

So what's the best way to do this in plain JS?

Thanks alot.

Upvotes: 1

Views: 2611

Answers (3)

Dan Smolinske
Dan Smolinske

Reputation: 319

You can check the ID of the clicked element and use that to control the trigger:

http://jsfiddle.net/nccjgtp6/

<div id="el">
    This is a thing.
    <div id="el2"> This is a second thing. </div>
</div>

var parent = document.getElementById("el");
var child = parent.children[0];

parent.addEventListener("click", function(e) {
    console.log(e);
    if(e.srcElement.id == 'el') {
        alert('Hello world');
    }
});

I do not know if this will work consistently in all browsers, but works for me in Chrome.

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You need to prevent event bubbling up to the parent element. For this you have to bind one more event handler to the child element:

child.addEventListener("click", function(e) {
    e.stopPropagation();
});

Click event bubbles which means that event travels up DOM tree from child to parent unless its propagation is stopped.

Upvotes: 2

bob.mazzo
bob.mazzo

Reputation: 5637

If I'm not mistaken, it's the event.stopPropagation(); line of code you need.

Upvotes: -1

Related Questions