Javascript DOM Onclick event trigger for single element

Question

Basically ive got a page, the code:

<body>
    <div onclick="alert('You clicked ' + this.tagName)">
       <h1 onclick="alert('You Clicked ' + this.tagName)">Click Me</h1>
    </div>
</body>

This is not my exact script but i rebuilt it for demonstrational purposes, when I click on the H1 it alerts like it should but when I close the alert box the DIV comes up , I have tried another way round it where I had

document.addEventListener('click' , function(e){
     var target = e.target || e.srcElement;
     alert('You Clicked ' + target.tagName);
});

This didn't work on all Elements of the page for some elements on the page for a weird reason is the a reason for this, am I missing something?

i also use that sorry i forgot to put that it doesnt stop any more — John Hudson
– John Hudson, Commented Sep 11, 2015 at 9:32
i made a fiddle for you check it out and let me know is this what you want jsfiddle.net/9f8mfpvq/1 — Shailendra Sharma
– Shailendra Sharma, Commented Sep 11, 2015 at 9:36
Close document.addEventListener(); You are missing ')' I hope — intekhab
– intekhab, Commented Sep 11, 2015 at 9:40

Shailendra Sharma · Accepted Answer · 2015-09-11 09:43:47Z

1

That is because After an event triggers on the deepest possible element, it then triggers on parents in nesting order

You need to stop event propagation in your case

 <body>
        <div onclick="alert('You clicked ' + this.tagName)">
           <h1 onclick="alert('You Clicked ' + this.tagName);event.stopPropagation();">Click Me</h1>
            xcxc
        </div>
    </body>

here the fiddle : http://jsfiddle.net/9f8mfpvq/1/

answered Sep 11, 2015 at 9:43

Shailendra Sharma

6,9922 gold badges30 silver badges48 bronze badges

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

1 Comment

John Hudson Over a year ago

Thanks Ive marked it as the Answer, I cant believe i didnt realise that, nooby mistakes

Collectives™ on Stack Overflow

Javascript DOM Onclick event trigger for single element

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related