ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript での stopPropagation メソッドの使用法は何ですか

JavaScript での stopPropagation メソッドの使用法は何ですか

WBOY
WBOY転載
2023-08-24 17:05:06697ブラウズ

JavaScript での stopPropagation メソッドの使用法は何ですか

この記事では、stopPropagation() メソッドと役立つコード例を紹介します。 その後、stopPropagation() メソッドと PreventDefault() メソッドの違いを理解します。

stopPropagation() イベント メソッド - 親要素は、このメソッドを使用してイベントにアクセスできません 方法。一般に、この関数は同じイベントへの複数の呼び出しを防ぐために作成されます。 広める。たとえば、ボタン要素が div タグ内に含まれており、両方の要素に onclick イベント、ボタン要素に関連付けられたイベントをアクティブ化しようとするたびに、 div 要素は実際に存在するため、div 要素に関連付けられたイベントも発生します。 ボタン要素。

###文法### リーリー

stopPropagation() メソッドは親アクセス イベントをブロックし、使用できます。 この問題を解決します。

例 1

リーリー

外側の div「my Second DIV(2)」をクリックすると、以下に示すように、確認ボックスが 1 回だけ表示されます。

さらに、内側の div「my First DIV(1)」をクリックすると、以下のように確認ボックスが 2 回表示されます。

次に「OK」ボタンをクリックすると、外側のdiv「My Second DIV(2)」の確認ボックスが表示されます。

チェックボックスをオンにして、内側の div「my First DIV(1)」をクリックするだけです。 以下のスクリーンショット。確認ボックスは 1 回だけ表示されます。

例 2

この例では、event.stopPropagation() メソッドがどのように実装されるかを理解しましょう。 これにより、ボタン要素に対して 1 つの関数が実行されます。

リーリー

preventDefault() メソッド

- これはイベント インターフェイスにあるメソッドです。この方法を使うことで、 ブラウザーが選択した要素に対してデフォルトのアクションを実行できないようにします。場合のみ テクノロジーでこれが可能であれば、イベントはキャンセル可能です。たとえば、スクロール イベントとホイール イベントは次のようになります。 避けられない出来事の例。 ###文法### リーリー 例 3

この例の URL にリンクがたどることを防ぎ、ブラウザーがアクセスできないようにする方法を理解しましょう。 別のページにアクセスしてください。

リーリー

リンクをクリックすると、「このイベントはブロックされているため、URL にアクセスできません。」という確認ボックスが表示されます。

以上がJavaScript での stopPropagation メソッドの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。