0

onclick="toggledropdown()" を使用して、ページに div (id="menu") があります。この div には、子の img 要素とテキストがあります。トグル コードは、画像以外がクリックされたときに問題なく動作します。ただし、画像をクリックすると、div が下にスライドしてから再び元に戻ります。

トグルコード:

function toggledropdown()
{
    if ($("#dropdown").is(":hidden"))
    {   
        $("#dropdown").slideDown(400);      
    }
    else
    {
        $("#dropdown").slideUp(50);     
    }
}

body.click は、ページがクリックされた場合にドロップダウンを非表示にします:

$(document.body).click(function(event)
{
    var targetID = $(event.target).attr("id");
    if (targetID !== "dropdown" && targetID !== "menu")
    {
        if (!$("#dropdown").is(":hidden"))
            toggledropdown();
    }
});

ドロップダウン.クリックして本文を無効にします.クリック

$("#dropdown").click(function(e)
{
    e.stopPropagation();
});

html div (問題に関係のないものは省略):

<div class="menu" id="menu" onclick="toggledropdown();">
    <img id="dropdownthumbnail" (blahsrc/styleblah) />
    Text
    <img id="dropdownarrow" (blahsrc/styleblah) />
</div>

したがって、繰り返しますが、メニュー div (画像を除く) をクリックするとメニューが正しくスライドし、もう一度 (画像を含む) またはページの他の場所をクリックすると正しく機能しますが、ドロップダウンが非表示のときに画像をクリックすると、 2回切り替えます（スライドして再びスライドするのを見ることができます）。

子 imgs が親の onclick を 2 回トリガーしていますか? 子供に一回、親に一回？なんで？期待どおりに動作させるにはどうすればよいですか: div のどこかをクリックすると、onclick が 1 回トリガーされますか?

4

1 に答える 1

0

イベントのバブルアップを停止するには、 event.stopPropagationを使用する必要があります。

説明: イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。

親ハンドラーがイベントを発生させないようにします

于 2012-09-18T21:31:48.470 に答える