jQuery_jqueryにおけるイベントオブジェクトeのイベントバブリング使用例の紹介

以前マニュアルを確認したときは、イベント オブジェクトの概念がわかりませんでした。そのとき私が実現したかったのは、テキスト ボックスをクリックしてドロップダウンの複数選択ボックスを表示することでした。テキスト ボックスがフォーカスを失った場合、 Blur イベントがトリガーされると、ドロップダウン ボックスが非表示になります。しかし、複数選択ボックスを選択しようとすると、非表示になって選択できなくなり、非常に落ち込んでいます。一日情報をチェックしていたら、ようやくピントが合わなくなりました。インターネット上でイベントバブリングのものを見つけ、それをクリックするとこの機能を実現できることがわかりました。

e.stopPropagation() はイベントのバブリングを防ぎます

コードをコピー コードは次のとおりです:

次のような状況が表示されます。span アラート -> td アラート -> テーブル アラート。これをイベントバブリングと呼びます。つまり、下から上、内側から外側に、イベントが順番にトリガーされます。連続してトリガーできる条件は、同じイベントを持つ複数のネストされたタグです。すべてのイベントが同時に発生し、同じイベントに対する応答が内側から外側へ実現されます。

イベントをバブル化したくない場合はどうすればよいですか?

コードをコピー コードは次のとおりです:

ドキュメント全体にクリックイベントが発生しないようにすることができます。テキスト ボックスとドロップダウン ボックスに追加します。これにより、それらを再度クリックしても、ドキュメントによってイベントがトリガーされなくなります。

イベント関連の情報を取得したい場合は、ナレッジ メソッドに e オブジェクトを追加する必要があります。e はイベント オブジェクトです。

e.preventDefault() は、イベントのデフォルト動作を防止します。

コードをコピー コードは次のとおりです。

$("a").click( function (e ) {
alert("デフォルトの動作は禁止されています");
Test


return false は、デフォルトを防ぐことに加えて、e.preventDefault() と e.stopPropagation() を同時に呼び出すことと同じです。イベントのバブルアップも防ぎます。 jquery ソース コードがある場合は、次のコードを確認できます:

コードをコピーします

コードは次のとおりです: if (ret===false){ Event.preventDefault();

events.stopPropagation();