How do I prevent a click handler being triggered when a child element is clicked?

I have two div tags, first 开发者_开发知识库div is the father and the second div is son Inside the father like this

<div id="father"> 
<div id="son"> </div>
</div>

And I've added an event (onclick) in div father like this

<div id="father" onclick="closeFather()"> 
<div id="son"> </div>
</div>

My question is why the son inherits the father in the event.

I want when I click on the Father div implement the event, but when i click on the son does not implement anything because it does not have any event.

---

This is caused by a JavaScript trait called event bubbling. By default, your events will 'bubble up' into the DOM.

When clicking a child node, you would automatically trigger a click event for it's parent node(s).

By default, when clicking an element, bubbling happens from the inside out: this means that first the child element's click() event will be trigged, then it's parent, etc.

You can solve the problem by adding a secondary click handler to your child element as well and telling the browser to stop bubbling in a cross-browser compatible way like so (see live example):

<script language="javascript">
    function parentHandler(e) {
        alert('parent clicked');
    };

    function childHandler(e) {
        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();    

        alert('child clicked');

    };    
</script>

<div id="parent" onclick="parentHandler(event);">
    Foo
    <div id="child" onclick="childHandler(event)">
        Bar
    </div>
</div>

---

You can pass the event as one of the arguments in the closeFather function, then check whether the event target is the father element. See this example

function closeFather(e) {
    if(e.target == document.getElementById('father')) {
        //do stuff
    }
};

Then in the HTML you just need to add the event argument to the javascript function.

<div id="father" onclick="closeFather(event)">
<div id="son"></div>
</div>

---

It's event bubbling. Core part of DOM Events. You could return false and prevent bubbling in your handler (closeFather, but you should pass event to it) if event triggered by son.

---

Use CSS to disable events!

.parent-element .element{
   pointer-events: none;
}

This CSS property, when set to "none" allows elements to not receive hover/click events, instead the event will occur on anything behind it.

https://caniuse.com/?search=pointer-events