0

我正在尝试构建一个（半透明）覆盖网页上的所有内容。与此类似：http ://www.jankoatwarpspeed.com/use-jquery-to-turn-off-the-lights-while-watching-videos

<div id="overlaySplash" onclick="clickHandler(this)">
    <div id="insideBox">
   [ label elements here with onclick="dosomething()" ]
    </div>
</div>

css

#overlaySplash {
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    background: rgb(50, 50, 50);
    background: rgba(0, 0, 0, .50);
    z-index: 50;
}
#insidebox {
    position: absolute;
    z-index: 100;
    left: 15%;
    right: 15%;
    bottom: 5%;
    line-height: 50px;
    text-align: left;
}

问题是我没有使用 jquery并且覆盖 div 将在 int 上有一些 clicable 内容。我在下面有这个功能，但是当我单击主覆盖 div内的元素时，JS 将返回 e.id 作为覆盖 div 本身，而不是单击的元素。这样我就无法判断用户真正点击的位置。

function clickHandler(e){ //hide the div overlaySplash

  e = e || event; 

  alert(e.id);
}

底线：
用户点击了 div 内的标签：dsomething();
用户点击了背景（DIV 本身）：closeOverlaySplash();

4

2 回答 2

2

我认为您不需要完全停止传播，因为它稍后可能会起到某些作用。为了便于使用，创建包含此功能的单独 js 和 css 文件可能是最简单的。

您遇到的问题基本上是事件在当前不需要时冒泡到父级。您可以轻松检查event.target.id以查看是否单击了父级。有了这个，您可以确保点击了覆盖与内容。

例如：

if (event.target.id == "overlay") { 
    //hide the overlay 
}

JSFiddler

于 2013-07-08T14:43:14.927 回答
1

像这样：

HTML

<div id="overlaySplash" onclick="clickHandler(event);">
    <div id="insideBox" onclick="clickHandlerInner(event);">Inner</div>
</div>

JS

function clickHandler(event) {
    alert("no");
}
function clickHandlerInner(event) {
    if (!event) var event = window.event;
    event.cancelBubble = true; //IE
    if (event.stopPropagation) event.stopPropagation()
    alert("yes")
}

jsFiddle

于 2013-07-08T14:35:47.080 回答