1

HTML

<div class="mybox" id="element1">
    <div class="mybox" id="element2">
        <div class="mybox" id="element3">
        </div>
        <div class="mybox" id="element4">
        </div>
    </div>
</div>

JS

$(".mybox").live("mouseup", function(event) {
   alert($(this).attr("id"));
});

さて、私の質問は、アクティブな div (すべての親ではなく、クリックしたもの) のみを取得する方法です。element2 をクリックすると、element2 が取得されてから「element1」がアクティブになり、element3 をクリックすると、element2 が取得されてから element1 が再びアクティブになる、などです。

助言がありますか？

4

2 に答える 2

5

これらすべてのアラートが表示される理由は、イベントのバブリングによるものです。要素をクリックするたびに、イベントが連鎖を伝播します。途中でクリックイベントが添付されているすべての要素が実行されます。

現在の要素がクリックされたときにのみコードを実行し、バブルイベントを無視するには、イベントを変更して、現在の要素がevent.targetを使用してクリックしたものであるかどうかを確認してから、目的のコードを実行します。

$(".mybox").live("mouseup", function(event) {
    if(event.target === this){
       alert($(this).attr("id"));
    }
});​

デモ- ライブで使用

jQuery 1.7 以降を使用している場合live()は非推奨となり、現在ではon() がイベントのアタッチおよび削除の推奨される方法になっています。

代わりに使用するon()には、次のようにします。

(document).on("mouseup", ".mybox", function(event) {
    if (event.target === this) {
        alert($(this).attr("id"));
    }
});​

デモ- on() の使用

使用する場合on()、上記の例ではドキュメントである最も近い静的要素を指定します。ただし、より近い静的要素がある場合は、代わりにそれを使用する必要がありますdocument。

回答に必要なすべてのドキュメントをリンクしましたが、もう一度要約します。

資力

  • live() - 非推奨になった理由のすべての詳細があります
  • on() - 1.7 以降推奨
  • delegate() - 1.4.2 以降では live の代わりに使用できます
于 2012-10-09T23:35:40.573 に答える
0

フランソワが書いたように、この効果は「イベント バブリング」と呼ばれます。しかし、jqueryには、イベントがチェーンを上るのを防ぐ独自の機能があります: stopPropagation

$("p").click(function(event){
  event.stopPropagation();
  // do something
});

これが特殊なケースで機能しない場合にのみ、イベント ターゲットを比較するソリューションを使用する必要があります。

于 2012-10-09T23:44:31.193 に答える