javascript - JavaScript - 上の div が下の div の onclick スクリプトの影響を受けない div の順序

Question

背景の div よりも近くなるように、3 つの div ボックスが重なり合っています。ただし、背景の div には次のイベントハンドラがあります: onclick="hideLarge();"

問題は、背景の div の可視性をブロックしているにもかかわらず、前面の div ボックスをクリックすると、実行したくない onclick 関数が引き続きトリガーされることです。

フロント div ボックスがこれらを傍受できる方法はありますか?

ありがとうございました！

score 2 · Accepted Answer

DOM 構造が次のような場合:

Document
 |- BODY
     |- DIV(#1)
         |- DIV(#2)
         |- DIV(#3)
             |- DIV(#4)
             |- DIV(#5)

次に、#4、#5 をクリックすると、#3 と #1 にバブルアップし、#3 と #2 をクリックすると、#1 にバブルします。

一方、次のような構造がある場合：

Document
 |- BODY
     |- DIV(#1)
     |- DIV(#2)
     |- DIV(#3)
     |- DIV(#4)
     |- DIV(#5)

document.body と document 以外に移動する div はありません。

event.stopPropagation()イベントがバブリングするのを止めるために使用できます。例 1 の #5 にクリックリスナーをバインドするとします。

div5.addEventListener('click', function(event) {
    event.stopPropagation();
}, false);

イベントは div #3 に到達する前に停止するため、#1 にも到達しません。

#5 に複数のクリックイベントがバインドされている場合、これらは停止されません。これらを停止したい場合は、使用する必要がありますevent.stopImmediatePropagation()

IE のバージョンによっては、これを行う方法が異なることに注意してください。

score 1 · Accepted Answer

クリックされた div が背景 div かどうかを確認します. ここで top div は 1 つ上の div の id です

function hideLarge(evt) {
if(evt.target.id!='top_div'){
//code
}

2 に答える 2