問題タブ [event-propagation]

特定のイベントが発生した後に他のイベント ハンドラーが実行されないようにする場合は、2 つの手法のいずれかを使用できます。例では jQuery を使用しますが、これはプレーン JS にも当てはまります。

1.event.preventDefault()

2.return false

イベントの伝播を停止するこれら 2 つの方法に大きな違いはありますか?

私にとってreturn false;は、メソッドを実行するよりも簡単で、短く、おそらくエラーが発生しにくいです。メソッドでは、正しい大文字と小文字、括弧などについて覚えておく必要があります。

また、メソッドを呼び出せるようにするには、コールバックで最初のパラメーターを定義する必要があります。preventDefaultおそらく、このようなことを避けて代わりに使用する理由がいくつかありますか? より良い方法は何ですか？

現在、jQuery を使用して div をクリック可能にしています。この div にはアンカーもあります。私が直面している問題は、アンカーをクリックすると、両方のクリック イベントが発生することです (div とアンカーの場合)。アンカーがクリックされたときに div の onclick イベントが発生しないようにするにはどうすればよいですか?

壊れたコードは次のとおりです。

JavaScript

HTML

JavaScriptイベントの伝播を停止することは「良い習慣」と考えられていますか?それは何らかの形でパフォーマンスに利益をもたらしますか?

複数のイベントを誤ってトリガーしないように、伝播を停止するレイアウト目的以外に利点があるかどうか疑問に思っています。

別の要素にネストされた要素（html）があり、両方にクリックハンドラーがアタッチされている場合、内側の要素をクリックするとクリックハンドラーが実行され、次に親にバブルアップしてクリックハンドラーが実行されます。それが私がそれを理解する方法です。

同じイベントがアタッチされていない場合、イベントはDOMツリーをバブルアップしますか？その場合、すべてのハンドラーの最後にevent.stopPropagation（）を配置して、これを停止し、処理を高速化する価値がありますか？

keypressbody 要素に割り当てられた Web ページにハンドラーがあります。Webページのどこでもアクティブにしたいのです。とか、そう思いました。テキスト入力フォームのkeypressイベントも body ハンドラーをアクティブにします。これは理にかなっていますが、私は望んでいません。

keypress理想的には、ハンドラーを body 要素に割り当てたままにして、何らかの方法で入力フォームだけを除外したいと考えています。入力レベルでイベントを停止し、それが本体に伝播するのを防ぐ方法はありますか? (それとも、HTML DOM イベントの正しい見方でしょうか?)

このjavascriptで問題が発生しています(jQueryを使用):

がクリックされると、独自のクリック イベントを再割り当てすることになっています。残念ながら、2 番目のクリック イベントも発生します。これが伝播に関係していることはわかっていますが、この動作を停止する方法がわかりません。

何か案は？

サム

イベントバブリングを理解しようとする悪夢を持っています。

完全なテストケース：

私が理解していることから、赤い境界線の内側の領域をクリックすると、3つのイベントハンドラー（赤、青、本体）がすべてトリガーされ、赤と本体のみがトリガーされます。

の3番目の値を変更して戻り値を変更しようとaddEventListenerしましたが、役に立たなかったのですが、何かアイデアはありますか？

多くの要素にバインドされたクリック機能があります。場合によっては、これらの要素が相互に収まっている可能性があります。そのため、クリック イベントは子にバインドされ、その親にもバインドされます。メソッドは、クリックされた要素に固有です。当然のことながら、イベントのバブリングにより、子のイベントが最初に発生し、次に親のイベントが発生します。親のイベントが子のイベントを上書きするため、両方を同時に呼び出すことはできません。したがってevent.stopPropagation()、クリックされた最初の要素のみがイベントを受け取るように使用できます。問題は、他のクリック イベントも要素に関連付けられていることです。たとえば、これらの要素で jQuery のドラッグ可能オブジェクトを使用しています。クリック イベントの伝播を停止すると、ドラッグ可能は機能せず、次のクリック イベントは呼び出されません。

だから私の質問は:イベント全体ではなく、イベントが呼び出すメソッドのイベントバブリングを停止する方法はありますか?

素晴らしいジョンですが、ここに問題があります。

クリック イベントは と にバインドされ#Elm1ます#Elm2。.Elmchildren幅と高さは 100% です。つまり、彼らは実際に現在のターゲットです。

内部にいくつかのリンクを含む大きな div があります。大きな div をクリック可能にし、内部にもリンクを配置したいのですが、これを行いました:

クリック可能な div 内のリンクをクリックすると、最初に「Hello」アラートが表示され、次に新しいページが読み込まれます。外側の div クリック ハンドラーをトリガーせずにアンカーを機能させることは可能ですか?

ajax 呼び出しの結果として、大量の "li" アイテムを生成しています。それらは次のようになります。

「li」アイテム「ボタン」要素のいずれかがクリックされたときに呼び出され、「li」親へのクリック イベントの伝播も停止するシングル クリック ハンドラを作成できますか? 何かのようなもの：

- - - - - - - - - 編集 - - - - - - - - - - -

また、ボタン要素を使用するかどうかはわかりませんが、代わりにクリック可能な div をボタンとして使用する可能性があります - 同じ手法が両方で機能するはずですよね?

ありがとうございました