ホームページ ウェブフロントエンド jsチュートリアル Jquery はイベントのバブリングを停止します。event.stopPropagation_jquery

Jquery はイベントのバブリングを停止します。event.stopPropagation_jquery

May 16, 2016 pm 05:58 PM
event イベントバブリング

説明: イベントが DOM ツリーにバブルアップするのを防ぎます。つまり、先行要素のイベント ハンドラーがトリガーされません。

追加バージョン: 1.0
event.stopPropagation()
event.isPropagationStopped() を使用して、このメソッドが (そのイベント オブジェクト上で) 呼び出されたかどうかを判断できます。

このメソッドは、trigger() によってトリガーされるカスタム イベントにも有効です。

これによって、同じ要素上の他のイベント ハンドラーの実行が妨げられるわけではないことに注意してください。

追加メモ:
.live() メソッドはイベントがドキュメントの先頭に伝播すると処理するため、ライブ イベントの伝播を停止することはできません。同様に、.delegate() イベントは常に、含まれている委任された要素に伝播され、委任されたイベントが呼び出されたときに要素上のイベントが実行されます。
例:
クリック イベントのバブリングを停止します。

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

$("p").click( function(event ){
event.stopPropagation();
// 何かをする
});


重要なことは記録することです予防イベントバブル。

div にはクリック イベントが追加されており、div 内の img にもクリック イベントが追加されているため、img がクリックされると、最初に img の click イベントがトリガーされ、次にクリックがトリガーされます。 div 上のイベントがトリガーされます。これはイベントバブリングです。

Jquery で彼を簡単に止めることができます。

次のように

コードをコピーします コードは次のとおりです:
event.stopPropagation() ;

このようにすると、画像をクリックしても div のクリック イベントがトリガーされなくなります

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

$('div').click(function(){
var $div = $(this);
if($div.find(' img').size() > 0){
return;
}else{
$div.css('backgroundColor','#e1f0f3');
$('').
appendTo($(this)).click(function) (イベント){
$div .css('backgroundColor','#ffffff');
$(this).remove();
event.stopPropagation(); ('margin-left','10px ')
}
});
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

イベントのバブリング メカニズムを理解する: 子要素をクリックすると親要素のイベントに影響を与えるのはなぜですか? イベントのバブリング メカニズムを理解する: 子要素をクリックすると親要素のイベントに影響を与えるのはなぜですか? Jan 13, 2024 pm 02:55 PM

イベントバブリングについて: 子要素をクリックすると親要素のイベントがトリガーされるのはなぜですか?イベントバブリングとは、入れ子になった要素構造において、子要素がイベントをトリガーすると、そのイベントがバブリングのように層ごとに親要素の層に最外層の親要素まで渡されることを意味します。このメカニズムにより、子要素のイベントが要素ツリー全体に伝播され、関連するすべての要素が順番にトリガーされます。イベントバブリングをより深く理解するために、具体的なコード例を見てみましょう。 HTML コード: <divid="parent&q"

jsのクリックイベントが繰り返し実行できない理由 jsのクリックイベントが繰り返し実行できない理由 May 07, 2024 pm 06:36 PM

JavaScript のクリック イベントは、イベント バブリング メカニズムのため、繰り返し実行できません。この問題を解決するには、次の措置を講じることができます。 イベント キャプチャを使用する: イベントがバブルアップする前に起動するイベント リスナーを指定します。イベントの引き継ぎ: イベントのバブリングを停止するには、event.stopPropagation() を使用します。タイマーを使用します。しばらくしてからイベント リスナーを再度トリガーします。

jQuery .val() が失敗する理由と解決策 jQuery .val() が失敗する理由と解決策 Feb 20, 2024 am 09:06 AM

タイトル: jQuery.val() が失敗する理由と解決策 フロントエンド開発では DOM 要素の操作に jQuery がよく使われますが、フォーム要素の値の取得や設定には .val() メソッドが広く使われています。ただし、.val() メソッドが失敗し、フォーム要素の値を正しく取得または設定できない状況が発生することがあります。この記事では、.val() エラーの原因を調査し、対応する解決策を提供し、具体的なコード例を添付します。 1.原因分析.val()メソッド

イベントのバブリングが 2 回トリガーされるのはなぜですか? イベントのバブリングが 2 回トリガーされるのはなぜですか? Feb 22, 2024 am 09:06 AM

イベントのバブリングが 2 回トリガーされるのはなぜですか?イベント バブリング (イベント バブリング) とは、DOM において、要素がイベント (クリック イベントなど) をトリガーすると、イベントがその要素から親要素にバブルアップし、最後に最上位のドキュメント オブジェクトにバブルアップすることを意味します。イベント バブリングは DOM イベント モデルの一部であり、これにより開発者はイベント リスナーを親要素にバインドできるため、子要素がイベントをトリガーすると、バブリング メカニズムを通じてイベントをキャプチャして処理できます。ただし、開発者は、バブルして 2 回トリガーされるイベントに遭遇することがあります。

vue のイベント修飾子はどのようなシナリオに使用できますか? vue のイベント修飾子はどのようなシナリオに使用できますか? May 09, 2024 pm 02:33 PM

Vue.js イベント修飾子は、次のような特定の動作を追加するために使用されます。 デフォルト動作の防止 (.prevent) イベント バブリングの停止 (.stop) ワンタイム イベント (.once) イベントのキャプチャ (.capture) パッシブ イベント リスニング (.passive) アダプティブ修飾子 (.self)キー修飾子 (.key)

イベントバブリングとは何ですか?イベントバブリングメカニズムの詳細な分析 イベントバブリングとは何ですか?イベントバブリングメカニズムの詳細な分析 Feb 20, 2024 pm 05:27 PM

イベントバブリングとは何ですか?イベント バブリング メカニズムの詳細な分析 イベント バブリングは Web 開発における重要な概念であり、ページ上でイベントを配信する方法を定義します。要素上のイベントがトリガーされると、イベントは最も内側の要素から送信され、最も外側の要素に渡されるまで外側に渡されます。この配信方法は水の中で泡が泡立っているようなものなので、イベントバブリングと呼ばれます。この記事では、イベントのバブリングのメカニズムを詳しく分析します。イベントバブリングの原理は、簡単な例を通して理解できます。 H があるとします。

バブルアップしない JS イベントはどれですか? バブルアップしない JS イベントはどれですか? Feb 19, 2024 pm 09:56 PM

JS イベントでバブルが発生しない状況にはどのようなものがありますか?イベントバブリング(Event Bubble)とは、要素上でイベントが発生した後、最も内側の要素から最外側の要素に向かってDOMツリーに沿って上方向にイベントが送信されることを意味し、この送信方法をイベントバブリングと呼びます。ただし、すべてのイベントがバブル化できるわけではなく、イベントがバブル化しない特殊なケースもいくつかあります。この記事では、JavaScript でイベントがバブルアップしない状況を紹介します。 1. stopPropagati を使用する

バブルアップしない JS イベントは何ですか? バブルアップしない JS イベントは何ですか? Feb 18, 2024 pm 06:31 PM

バブルアップしない JS イベントは何ですか? JavaScript は、Web ページに対話性とダイナミクスを追加する強力なスクリプト言語です。 JavaScript では、イベント駆動型プログラミングは非常に重要な部分です。イベントとは、ボタンのクリック、マウスの動き、キーボード入力など、Web ページ上でユーザーが実行するさまざまな操作を指します。 JavaScript は、イベント処理関数を通じてこれらのイベントに応答し、対応する操作を実行します。イベント バブリングは、イベント処理中の一般的なメカニズムです。イベントのバブリングとは、

See all articles