jqueryバブルイベントの阻止
2457 ワード
バブルイベントとは?
子要素は親要素の下に包まれ、同時に子要素にイベントの親要素をバインドするイベントがバインドされると、子要素をクリックすると、親要素上のイベントも出発し、子要素→親要素の順になります.
なぜバブル事件を解決するのですか?
子要素と親要素が同時にクリックイベントをバインドすると、子要素をクリックすると、親要素を望まないイベントもトリガーされます.
バブルイベントを解決するにはどうすればいいですか?
1.event.stopPropagation();
定義と使用法
イベントを配布しません.
終了イベントは、伝播プロセスの捕獲、ターゲット処理、または発泡段階でさらに伝播する.メソッドを呼び出すと、ノード上でイベントを処理するプロセッサが呼び出され、イベントは他のノードに割り当てられなくなります.
定義と使用法
イベントのデフォルトのアクションをキャンセルします.このメソッドは、イベントに関連付けられたデフォルトのアクションが存在する場合、Webブラウザに通知されます.たとえばtypeプロパティがsubmitの場合、イベント伝播の任意のフェーズで任意のイベントハンドルを呼び出すことができ、このメソッドを呼び出すことでフォームのコミットを阻止できます.Eventオブジェクトのcancelableプロパティがfasleの場合、デフォルトのアクションはないか、デフォルトのアクションをブロックできません.いずれの場合も、このメソッドを呼び出すのは役に立ちません.
子要素は親要素の下に包まれ、同時に子要素にイベントの親要素をバインドするイベントがバインドされると、子要素をクリックすると、親要素上のイベントも出発し、子要素→親要素の順になります.
なぜバブル事件を解決するのですか?
子要素と親要素が同時にクリックイベントをバインドすると、子要素をクリックすると、親要素を望まないイベントもトリガーされます.
バブルイベントを解決するにはどうすればいいですか?
1.event.stopPropagation();
$(function() {
$(".three").click(function(event) {
event.stopPropagation();
});
});
定義と使用法
イベントを配布しません.
終了イベントは、伝播プロセスの捕獲、ターゲット処理、または発泡段階でさらに伝播する.メソッドを呼び出すと、ノード上でイベントを処理するプロセッサが呼び出され、イベントは他のノードに割り当てられなくなります.
2.return false;
$(function() { $("#three").click(function(event) { return false; }); });
3.event.preventDefault();
$(function() { $(".three").click(function(event) { event.preventDefault(); }); });
定義と使用法
イベントのデフォルトのアクションをキャンセルします.このメソッドは、イベントに関連付けられたデフォルトのアクションが存在する場合、Webブラウザに通知されます.たとえばtypeプロパティがsubmitの場合、イベント伝播の任意のフェーズで任意のイベントハンドルを呼び出すことができ、このメソッドを呼び出すことでフォームのコミットを阻止できます.Eventオブジェクトのcancelableプロパティがfasleの場合、デフォルトのアクションはないか、デフォルトのアクションをブロックできません.いずれの場合も、このメソッドを呼び出すのは役に立ちません.