在一个固定的div中抓住鼠标点击鼠标吗?

时间:2013-02-14 20:42:00

标签: javascript html css3 event-bubbling stoppropagation

我正在使用此模态窗口的略微修改版本:http://blog.avtex.com/2012/01/26/cross-browser-css-only-modal-box/

我所做的修改之一是将onclick="history.back(-1)"添加到叠加和垂直偏移div,以便通过单击其外部来隐藏模态。但是,将onclick事件添加到vertical-offset div会捕获dumbBox div上发生的点击。

你可以看看这个jsFiddle看看发生了什么:http://jsfiddle.net/dvrcthewrld/uaP3v/1/

如何让dumbBox div捕获其中发生的点击,而不是捕获它们的垂直偏移div?

[请不要jQuery。]

我真的很想知道为什么内部div会将click事件传递给父级,以及如何阻止它。

1 个答案:

答案 0 :(得分:1)

演示:http://jsfiddle.net/cZkn2/

HTML

<div class="vertical-offset" onclick="check(this)">
    <div class="dumbBox" id="div">
        Content goes here<br/>
        Content goes here<br/>
        Content goes here<br/>
        Content goes here
    </div>
</div>

的javascript

function check(e) {
    var target = (e && e.target) || (event && event.srcElement);
    var obj = document.getElementById('div');
    if(target!=obj){history.back(-1);}
}