JavaScript でインライン onclick 属性を使用してイベントの伝播を停止するにはどうすればよいですか?

ネストされた HTML 要素に同じイベントを追加する必要がある場合があります。たとえば、2 つの div があり、1 つは親 div で、もう 1 つは子 div です。次に、親 div と子 div に onclick イベントを追加し、ユーザーが親 div と子 div をクリックしたときにさまざまな機能を実行する必要があります。この場合、常に親 div と子 div でイベントが実行されます。

次の例を使用して、ネストされた HTML 要素で同じイベントを実行する方法を見てみましょう。

＃＃＃例＃＃＃

以下の例では、2 つの div を作成します。外側の div には「parent-div」クラス名を付け、内側の div には「child-div」クラス名を付けました。

さらに、2 つの div 要素に対してさまざまな機能を実行するための onclick イベントも追加しました。ユーザーが内部 div をクリックすると、親 div でもクリック イベントが発生します。

リーリー

上記の問題を解決するには、子 div をクリックして親 div の clickevent.stopPropogation() メソッドを呼び出すなど、イベントを使用する必要があります。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って stopPropgation() メソッドを使用して、親要素へのイベントの伝播を停止できます。

リーリー ＃＃＃例＃＃＃

以下の例では、HTML

タグ内にテキストを追加し、executeP() 関数を実行する onclick イベントにテキストを追加しています。さらに、

タグ内に

タグを追加し、span タグにexecuteSpan() 関数を実行する「onclick」イベントを追加しました。

さらに、event.stoPropogation() メソッドを

要素の onclick イベントとともに使用して、ユーザーが

をクリックしたときに

タグ上のイベントの伝播を停止しました。

出力では、ユーザーが

要素のテキストをクリックすると、executeSpan() 関数のみが実行されることがわかります。 リーリー ＃＃＃例＃＃＃ 以下の例では、HTML マークアップを使用して 3 つのネストされた要素の階層を作成します。各要素に onclick イベントを追加しました。 events.stopPropogation() メソッドを使用しない場合は、常に firstDivClick() 関数が実行されます。

この問題を解決するには、イベントを呼び出すときに関数のパラメーターとしてイベントを渡し、関数内で stopPropogation() メソッドを使用します。

ユーザーがメニュー テキストをクリックすると、kebabMenuClick() 関数のみが実行されることがわかります。ユーザーが 2 番目の div をクリックすると、単純に SecondaryDivClick() 関数が実行されます。

リーリー

ユーザーは、イベントに対してevent.stopPorpogation()メソッドを使用する方法を学びました。基本的に、イベントが親要素に伝播するのを防ぐために使用されます。こうすることで、同じイベントが親子要素をトリガーしたときに、すべての子要素に対して異なる関数を実行できます。

以上がJavaScript でインライン onclick 属性を使用してイベントの伝播を停止するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。