JavaScript - div的顺序，其中顶部不受来自div下面的onclick脚本的影响

Question

I have three div boxes that stack on top of each other so that one is closer than the background div. However the background div has this event handler: onclick="hideLarge();"

The issue is that when I click on the div box at the front even though it is blocking the visibility of the background div, it still triggers that onclick function which I do not want it to do.

Is there a way that the front div box can intercept these?

Thank you!

Answer 1

If your DOM structure is like so:

Document
 |- BODY
     |- DIV(#1)
         |- DIV(#2)
         |- DIV(#3)
             |- DIV(#4)
             |- DIV(#5)

Then clicks on #4,#5 will bubble up to #3 and #1 while clicks on #3 and #2 will bubble to #1.

If you on the other hand have a stucture like this:

Document
 |- BODY
     |- DIV(#1)
     |- DIV(#2)
     |- DIV(#3)
     |- DIV(#4)
     |- DIV(#5)

None of the divs will bobble to other then document.body and document.

You can use event.stopPropagation() to stop the event from bubbling up. Say we bind a click listener on #5 in example 1:

div5.addEventListener('click', function(event) {
    event.stopPropagation();
}, false);

The event will be stopped before it reaches div #3 and therefore also not reach #1.

If you have multiply click event bound on #5 these will not be stopped. If you wish to stop these you should use event.stopImmediatePropagation()

Note that some versions of IE have a different way of doing this.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Answer 2

Check whether the clicked div is background div or not like, Here top div is the id of the div of top one

function hideLarge(evt) {
if(evt.target.id!='top_div'){
//code
}