Question

我正在尝试构建一个覆盖网页上所有内容的（半透明）叠加层。与此类似：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上有一些可引用的内容。我在下面有这个功能但是当我点击里面的元素时，主叠加div JS会将e.id作为叠加div本身返回，不是点击的元素。这样我无法告诉用户真正点击的位置。

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

  e = e || event; 

  alert(e.id);
}

底线：
用户在div中点击了一个标签：dosomething（）;
用户点击了背景（DIV本身）：closeOverlaySplash（）;

Answer 1

我认为你不需要完全停止传播，因为它可能会在以后用于某些目的。最简单的方法是创建一个单独的js＆amp;包含此功能的css文件，易于使用。

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

例如：

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

JSFiddler

Answer 2

像这样：

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

css + js：div click（和里面的元素）

2 个答案: