CODEWITHSUNDEEP
javascripthtmlevents
audio_developer
audio_developer

Reputation: 105

Prevent event from firing: div over another div with position:absolute

Any idea how to prevent the "background" div to fire an event when one clicks on the "red" div in the foreground which is absolute positioned?

Want I want: when I click on the "red" div I just want this event to fire and when I click on the background I just want the event for the background.

http://jsfiddle.net/XzQRJ/

<div id="wrapper" style="position:relative; width:100px; height:100px; background:grey; overflow:hidden;">
    <div id="div1">test
    </div>            
</div>

The CSS

#div1 {
    left:0px;
    top: 0px;
    width: 40px;
    height: 40px;
    position:absolute;
    z-index:10;
    background-color: red;
}

I try to fix it for hours and I'm a bit clueless at the moment.

Upvotes: 0

Views: 1080

Answers (1)

plalx
plalx

Reputation: 43728

Just stop the propagation of the event.

var elem = document.getElementById('div1');
elem.addEventListener ('mousedown',  function (e) {
    e.stopPropagation();
    msg(elem);
}, false);

FIDDLE

Upvotes: 4

Related Questions