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

まず、インターネット上で多くの記事を目にしましたが、一般的に 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に領域が存在しません）