鼠标单击父元素，但防止其子元素触发事件

Question

How to define on child element, not to trigger an event, like on .mouseclick = 'no-event' or : .mousedown = 'no-event' with natural Javascript command?

So, it's parent will get the the first event before bubbling-up, the parent element event will get e. target = e.currentTarget

I need to do it on some specific child elements, and some not.

On parent element the 'capture', does not give the correct behaviour as mentioned above.

All other solutions I follow on the web, are giving many 'tricky' solutions that don't work correctly.

Answer 1

var parentEl = document.getElementById('parent');
var childEl = document.getElementById('child');

parentEl.addEventListener('click', function(event) {

}, true)
childEl.addEventListener('click', function(event) {

}, true)

If you pass the true on eventListener it stops the event from bubbling.

Answer 2

You could give the children a custom class which determines it should be clickable or not. Inside the callback function for it's parent container check which class the target is using and act accordingly.

Here's an example:

 document.getElementById("container").addEventListener('click', function(e) { if (e.target.className == "clickable") { console.log("I should do something!"); } else { console.log("I should NOT do something!"); } }); 

 <div id="container"> <div class="clickable"> this is clickable </div> <div> this is not clickable </div> </div>