【问题标题】:Have div within a fixed div catch mouse clicks?固定 div 中的 div 是否捕获鼠标点击?
【发布时间】:2013-02-14 20:42:00
【问题描述】:

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

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

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

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

[请不要使用 jQuery。]

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

【问题讨论】:

  • 当用户在dumbBox外部点击时,您希望模态框关闭吗?
  • 是的,我希望通过触发历史回溯事件来实现。我通常对我的解决方案感到满意。只是垂直偏移 div 的讨厌问题使它不完美。
  • stopPropagation 在这里合适吗?

标签: javascript html css event-bubbling stoppropagation


【解决方案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);}
}

【讨论】:

  • 此解决方案存在一个问题。如果我单击dumbBox 中的一个div,那么它会关闭,因为从技术上讲,我没有单击id="div" 的div。这就是为什么我希望有一个像我尝试过的那样在语法上积极的解决方案。
  • 我发现将onclick="event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);" 添加到dumbBox div 可以防止该div 中的点击冒泡到垂直偏移div。因此,代码完全可以在 Chrome 中运行,但您的 javascript 仍然无法在 Firefox 中运行。
猜你喜欢
  • 1970-01-01
  • 2011-04-11
  • 2013-09-18
  • 1970-01-01
  • 2013-11-07
  • 2016-08-14
  • 1970-01-01
  • 2016-05-24
  • 1970-01-01
相关资源
最近更新 更多