jQuery で子要素のクリックで親イベントハンドラーが実行されないようにするにはどうすればよいですか?-jsチュートリアル-php.cn

jQuery で子要素のクリックで親イベントハンドラーが実行されないようにするにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-23 22:55:10

オリジナル

760 人が閲覧しました

How to Prevent Parent Event Handlers from Executing with Child Element Clicks in jQuery?

親イベントハンドラーの実行の防止

指定された HTML 構造で、任意の div 要素をクリックすると、その親 div のクリックハンドラーがトリガーされます。意図しない動作につながります。これを防ぐには、jQuery を使用してクリックイベントの伝播を無効にします。

<div>

ログイン後にコピー

function func() {
   if ($(childId).hasClass("visible")){
    $(childId).removeClass("visible");
    $(childId).addClass("invisible");
}

ログイン後にコピー

クリックイベントの伝播を無効にするには、stopPropagation() メソッドを呼び出すイベントハンドラーを子要素に追加します。

function handler(event) {
    event.stopPropagation();
    // Custom code to execute for the child's click event
}

$('#a').add('#b').click(handler);

ログイン後にコピー

イベントの伝播を防ぐことで、子要素 ('#b') をクリックしても親要素のトリガーが発生しなくなります。クリックハンドラー ('#a')。同様に、子孫要素 ('#c') をクリックしても、両方の親要素 ('#b' と '#a') には反映されません。

以上がjQuery で子要素のクリックで親イベントハンドラーが実行されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jQuery で子要素のクリックで親イベント ハンドラーが実行されないようにするにはどうすればよいですか?