0

Web ページ全体をカバーする (半透明の) オーバーレイを作成しようとしています。これに似ています: 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 はクリックされた要素ではなく、オーバーレイ div 自体として e.id を返します。この方法では、ユーザーが実際にどこをクリックしたかわかりません。

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

  e = e || event; 

  alert(e.id);
}

結論:
ユーザーは div 内のラベルをクリックしました: dosomething();
ユーザーが背景 (DIV 自体) をクリックした: closeOverlaySplash();

4

2 に答える 2

2

後で何らかの目的に役立つ可能性があるため、伝播を完全に停止する必要はないと思います。使いやすくするために、この機能を含む個別の js ファイルと css ファイルを作成するのが最も簡単な場合があります。

あなたが抱えている問題は、基本的に、イベントが現在必要でないときに親にバブリングしていることです。event.target.id親がクリックされたかどうかを簡単に確認できます。これにより、オーバーレイとコンテンツがクリックされたことを確認できます。

例えば：

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

JSFドラー

于 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")
}

jsフィドル

于 2013-07-08T14:35:47.080 に答える