javascript - 防止事件触发 : div over another div with position:absolute

Question

知道如何防止“背景”div 在单击绝对定位的前景中的“红色”div 时触发事件吗？

我想要:当我点击“红色”div 时，我只想触发该事件，当我点击背景时，我只想触发该事件。

http://jsfiddle.net/XzQRJ/

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

CSS

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

我花了几个小时尝试修复它，但目前我有点无能为力。

Answer 1

停止事件的传播。

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

FIDDLE