有一个固定的div抓住鼠标点击？

我使用这个模式窗口的稍作修改的版本：http://blog.avtex.com/2012/01/26/cross-browser-css-only-modal-box/有一个固定的div抓住鼠标点击？

一个我做的修改是增加onclick="history.back(-1)"到覆盖和垂直偏移申报单，以便通过点击以外的隐藏模式它。但是，向vertical-offset div添加onclick事件会捕获在dumbBox div上发生的点击。

您可以在此的jsfiddle看一看，看看发生了什么：http://jsfiddle.net/dvrcthewrld/uaP3v/1/

我怎样才能获得dumbBox div来对付那些在它发生的点击，而不是垂直偏移DIV赶上他们？

[否jQuery的，请。]

我真的很想知道为什么内DIV传click事件给家长，如何制止。

来源

2013-02-14 David

你想要的模式时关闭dumbBox外的用户点击？ – 2013-02-14 20:46:55

是的，我希望通过触发历史回来事件发生。我通常对我的解决方案很满意。这只是垂直偏移量div令人讨厌的问题，使它不完美。 – David 2013-02-14 20:50:01

可能'stopPropagation'适合在这里？ – David 2013-02-14 22:20:26

演示：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);} 
}

来源

2013-02-14 20:54:29

此解决方案的一个问题。如果我点击dumbBox中的div，它会关闭，因为我没有在技术上点击id =“div”的div。这就是为什么我希望得到像我所尝试的那种语法正面的解决方案。 – David 2013-02-14 22:04:30

另外，它在Firefox中不起作用。不知道为什么。 – David 2013-02-14 23:19:35

我想通过向dumbBox div添加'onclick =“event.stopPropagation？event.stopPropagation（）：（event.cancelBubble = true）;”'可以防止该div中的点击冒泡到垂直偏移量div。所以，代码完全适用于Chrome，但您的JavaScript仍然不能在Firefox中工作。 – David 2013-02-15 04:00:25

有一个固定的div抓住鼠标点击？

回答

相关问题