0

これが例です。これはGoogleのメニューです。

ここに画像の説明を入力してください

歯車（赤十字）をクリックすると、メニューが表示されます。開いているメニュー（緑色の十字）以外の場所をクリックすると、メニューが消えます。問題は、その2番目のクロージングイベント（緑の十字）をどのようにキャッチするかです。

メニューを開くのは簡単です。

var x = document.getElementById("star");          // this is id of the gear-wheel;
var y = document.getElementById("hiddenMenu");    // this is id of the menu with display = none;
x.onclick = function() {
    y.style.display = "block";
}

しかし、それを閉じるにはどうすればよいですか？「body」タグを使用してこの方法を試しました。

var bar = document.getElementsByTagName("body")[0];
bar.onclick = function() {
    if (y.style.display == "block") {
       y.style.display = "none";
    }
}

ただし、メニューは開いた直後に閉じられます。まず「星」をクリックすると「ブロック」になります。しかし、この直後は本体もクリックされるので「なし」になります。それを解決する方法は？正しいターゲットイベントをキャッチするための「body」のコードを本当に書く必要がありますか？

4

2 に答える 2

2 
star.addEventListener("click", closeIfOpen);
document.addEventListener("click", closeIfClickOutsideMenu);
于 2012-01-17T19:00:47.287 に答える
1

これは、バブリング/イベントの伝播が原因です。リスナー#starが最初に発砲し、次にイベントが体に泡立ち、そこで発火します。

イベントの伝播をキャンセルする必要があります。残念ながら、これはライブラリなしでインラインハンドラーを使用するのは特に簡単ではありません。

var x = document.getElementById("star");          // this is id of the gear-wheel;
var y = document.getElementById("hiddenMenu");    // this is id of the menu with display = none;
x.onclick = function(e) {
    e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }

    y.style.display = "block";
}
于 2012-01-17T19:03:24.620 に答える