1

私が持っているとします：

   <div id="outer" onclick="thingsHappen()">
      <div id="inner"></div>
   </div>

外側または内側のdivをクリックすると、 thingsHappen() が実行されます。それは明らかです。

ここで、内側のdivに別のメソッドを定義する必要があります。例えば

$("#inner").click(function() {
    doThings();
});

内部をクリックすると、thingHappen() と doThings() の両方が実行されます。thingsHappen() を実行せずに内側の div をクリックしたときに doThings() を実行するにはどうすればよいですか?

#inner から click メソッドのバインドを解除しようとしましたが、うまくいきませんでした。PS。HTML の構造を変更することはできません。

4

6 に答える 6

2

イベントの伝播を停止します。

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

例: http://jsfiddle.net/QNt76/

JavaScript イベントは、伝播を停止しない限り、DOM ツリーをバブルアップします。これが、親イベント ハンドラが通知を受ける原因となっていました。

于 2012-04-22T00:26:10.347 に答える
1

あなたがしたいEvent.stopPropagation()：

$("#inner").click(function(e) {
    doThings();
    e.stopPropagation();
});
于 2012-04-22T00:26:32.970 に答える
0

子要素に関連するイベントは、次のように伝播が停止されない限り、DOM 内の親要素にバブル アップします。

$("#inner").click(function(event) {
    doThings();
    event.stopPropagation();
});

これは、キャプチャ/バブリングおよびJavascriptイベントに関する良い読み物です。http://www.quirksmode.org/js/events_order.html

于 2012-04-22T00:34:30.490 に答える
0

あなたがやろうとしているのは、イベント（クリック）が「バブリング」するのを止めることです。この場合、バブリング フェーズでイベントの伝播を停止する必要があります。jquery を使用している場合は、次の関数を使用できます。

HTML

<div id="outer" onclick="thingsHappenOuter()"> 
    <div id="inner">
    </div> 
</div>

JS

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

詳細については、http : //api.jquery.com/event.stopPropagation/を参照してください。

于 2012-04-22T00:43:39.393 に答える
0 
$("#inner").click(function(e) {
    e.stopPropagation();
    doThings();
});​
于 2012-04-22T00:26:24.470 に答える
0

ドキュメント ツリーへの伝達を停止する必要があります。

$("#inner").click(function(event) {
    doThings();
    event.stopPropagation();
});

参照: http://api.jquery.com/event.stopPropagation/

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

于 2012-04-22T00:26:56.820 に答える