ホームページ >ウェブフロントエンド >jsチュートリアル >event.cancelBubble とevent.stopPropagation()_jquery の違いの概要

event.cancelBubble とevent.stopPropagation()_jquery の違いの概要

WBOY
WBOYオリジナル
2016-05-16 17:58:301504ブラウズ

まず、インターネット上で多くの記事を目にしましたが、一般的に 2 つの (誤った) 見解に分けられています:
1. cancelBubble は IE のバブリング イベントを防ぐために使用され、event.stopPropagation() は次のような他のブラウザーで使用されます。ファイアフォックスとクローム。
上記が正しいか間違っているかについては話さないでください
例を見てみましょう: (テスト環境: chrom5.0.275.7、moz3.6.4、opera10.53、ie6,7,8)

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




無題ページ





は効果的にブロックできます。もちろん、chrome と opera のevent.stopPropagation(); も有効です。
結論 1: 上記は、event.cancelBubble が新しいバージョンの chrome ブラウザと opera ブラウザですでにサポートされていることを示しています。実際には、moz だけがサポートされていません。 , 英語の意味だけでなく、個人的にはevent.stopPropagation()よりもevent.cancelBubble.cancelBubbleの方が優れていると思います。したがって、moz が新しいバージョンをリリースしてサポートしてくれることを願っています。これは
2 と互換性があります。イベントの順序に関するよくある質問もあります。
(私の意見では)不完全に正確な結論
つまり、ソース イベント要素 ->> ;>body-->>document
moz: 他のブラウザが上記の逆になるまで待ちます
まず例を見てみましょう:




コードをコピー
コードは次のとおりです:
無題ページ



>


body からボタンイベントをクリックすると、, ,,その後、最初に本体に警告してから、div をトリガーしてポップアップ 123 を実行します。バブリングが防止されているため、ボタンのクリックはトリガーされません。
しかし、それは私たちによってテストされています。 moz は依然として内側から外側へトリガーされます。正しくalert("btn")--->>alert("123")----を実行して、バブリングを防ぎ、ボディのクリックイベントをトリガーしないようにします
この時点で、上記のことが疑問に思うかもしれません。は正しくありませんが、addListenter およびattachEvent () で追加されたイベントについては、上記のステートメントは正しいです。例:




コードをコピー

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




無标题页



  • リスト項目 1

  • リスト項目 2







  • はこの方法に準拠しています。実行結果は、クリック イベントが発生し、その後、回避が妨げられているため、この時点ではポイント自体は発生しません。さらに、このようなアニメーションを使用してイベントを追加する方法、好画像のevent.cancelBubbleはmoz内でも有効であり、chromeとmozに領域が存在しません)
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:jquery focus(fn),blur(fn) メソッドの例 code_jquery次の記事:jquery focus(fn),blur(fn) メソッドの例 code_jquery

関連記事

続きを見る