ウェブフロントエンド
jsチュートリアル
イベント バブリングとイベント委任に関する jquery のヒント、およびイベント bubbling_jquery を防止および許可する 3 つの実装方法
イベント バブリングとイベント委任に関する jquery のヒント、およびイベント bubbling_jquery を防止および許可する 3 つの実装方法
まず、jQuery イベントがトリガーされるとき、2 つのメカニズムがあることは誰もが知っています。1 つはイベント委任、もう 1 つはイベント バブリングです (IE の状況は当面考慮しません)。クリック イベントを例として、最初に次のコードを添付します:
html:
<body>
<div id="box">
<p id="btn">我是按钮</p>
</div>
</body>
style:
.hid{
display:none;
}スクリプト:
$('#box').click(function(){
$(‘#btn').toggleClass(‘hid');
})
$('#btn').click(function(){
alert('btn');
})このコードの本来の目的は、#btn をクリックすると「btn」という文字列を警告し、#box をクリックすると #btn を非表示にすることです。 btn の場合、最初に btn イベントを実行し、次にボックス イベントを実行します。つまり、最初にアラートを実行し、次にそれを非表示にします。これは私たちが考えていたものと異なるので、この問題をどう解決するか? ここで、イベントのバブリングのメカニズムを考える必要があります。btn をクリックすると、イベントがドキュメント オブジェクトまで親要素にバブリングされるからです。
1.7 以降の JQuery バージョン (私の記憶が正しければ) は、バインドされた要素のイベントを処理するための .on() イベントを提供し、バブリングを防ぐために .on() イベントと stopPropagation() メソッドを使用できます。 🎜>
$('#box').on('click','#btn',function(e){
e.stopPropagation()；
alert(‘btn');
})
$('#box').click(function(){
$(‘#btn').toggleClass(‘hid');
})私はここでそれを考えました。.on() が使用されていない場合にそれを解決する方法は、ネイティブ JS と同様に、クリックされたターゲットを監視するために addEventListener を使用します。コードは複雑ではありません。
$('#box‘).click(function(e) {
if (e.target == this) {
$(‘#btn').toggleClass(‘hid');
}
})
$(‘#btn').click(function() {
alert(‘btn');
})もちろん、イベント バブリングは副作用のすべてではありません。これは、これから説明する別のタイプです。イベント委任は、イベント バブリングに基づいています。 btn と #box の間には多くの要素があり、最も内側の #btn をクリックして、それに対応するイベントをトリガーしたい場合は、その周囲の要素をクリックして、そのクリックがターゲットであるかどうかを判断できます。 btn である場合、btn をトリガーするイベントは実際には上記の .on() の例であり、次のように書き換えることができます。
$('body').on('click','#btn',function(e){
alert(‘btn');
})
jqueryのバブリングイベントのブロックと許可（3つの実装方法）
バブリングやデフォルトのイベントは、特定の時点では必要ありません。ここでは、バブリングやデフォルトのイベントを防ぐための 3 つの方法を紹介します。興味のある人は、それについて理解するのに役立ちます。賑やかなイベント
バブリング イベントやデフォルト イベントの発生を望まない場合があるため、バブリング イベントやデフォルト イベントを防ぐためにいくつかの jquery メソッドが必要です。次の 3 つの方法で、さまざまなレベルのブロックを実現できます。
A: return false --->イベント ハンドラーで、デフォルトの動作とイベントのバブリングを防ぎます。
return false イベント処理では、デフォルトイベントやバブリングイベントを防ぐことができます。
B:event.preventDefault()---> イベント ハンドラーで、デフォルト イベントを防止します (バブリングを許可します)。
event.preventDefault() はデフォルトのイベントを防止できますが、イベント処理中にバブリング イベントが発生することを許可します。
C:event.stopPropagation()---> イベント ハンドラーでバブリングを防止します (デフォルトの動作を許可します)。
event.stopPropagation() はバブリングを防止できますが、イベント処理中にデフォルトのイベントが発生することを許可します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7329
9
1627
14
1350
46
1262
25
1209
29
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
カスタムGoogle検索APIセットアップチュートリアル
Mar 04, 2025 am 01:06 AM
このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です！検索をyに制限することができます
例JSONファイルの例
Mar 03, 2025 am 12:35 AM
この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます
10 jQuery構文蛍光物
Mar 02, 2025 am 12:32 AM
コードプレゼンテーションを強化する：開発者向けの10個の構文蛍光物 ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。 適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
8見事なjQueryページレイアウトプラグイン
Mar 06, 2025 am 12:48 AM
楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
10 JavaScript＆JQuery MVCチュートリアル
Mar 02, 2025 am 01:16 AM
この記事では、JavaScriptとJQuery Model-View-Controller（MVC）フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。 これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています
＆＃x27; this＆＃x27; JavaScriptで？
Mar 04, 2025 am 01:15 AM
コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした
