JavaScript がイベントのバブリングとイベント自体の発生を防ぐ方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript がイベントのバブリングとイベント自体の発生を防ぐ方法

autoload

Apr 09, 2021 am 11:27 AM

javascript イベントバブリング

Javascript では、イベントバブリングはノードによって生成され、親ノードに影響を与え、段階的に上昇し、最終的にページ全体にゆっくりと影響を及ぼしますが、場合によってはイベントバブリングが発生しないようにしたい場合があります。 . それともイベント自体の発生でしょうか？この記事では一緒に調べていきます。

1. イベントの発生を防ぐ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boxA {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: blue;
            text-align: center;
        }       
        .boxB {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: green;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="boxA">
        <div class="boxB">boxB</div>
    </div>
    <script>
        var boxA = document.querySelector(&#39;.boxA&#39;);
        var boxB = document.querySelector(&#39;.boxB&#39;);
        boxA.onclick = function (e) {
        console.log(&#39;我被点击了boxA&#39;);
    };
    boxB.onclick = function (e) {
        e.cancelBubble=true; //不冒泡
        console.log(&#39;我被点击了boxB&#39;);
    };
    </script>
</body>
</html>

ログイン後にコピー

2. イベントの発生を防ぐ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<form action="http://www.php.cn" method="POST">
<button type="submit">按钮1</button>
</form>    
<body>
    <script>
        const btn=document.querySelector("button");
        console.log(btn);
        btn.addEventListener("click",function(e){
            e.preventDefault();
        });
    </script>
</body>
</html>

ログイン後にコピー

推奨: 「2021 js 面接の質問と回答 (大要約)」

以上がJavaScript がイベントのバブリングとイベント自体の発生を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7715

Java チュートリアル

1641

CakePHP チュートリアル

1395

Laravel チュートリアル

1289

PHP チュートリアル

1232

Related knowledge

イベントのバブリングメカニズムを理解する: 子要素をクリックすると親要素のイベントに影響を与えるのはなぜですか? Jan 13, 2024 pm 02:55 PM

イベントバブリングについて: 子要素をクリックすると親要素のイベントがトリガーされるのはなぜですか?イベントバブリングとは、入れ子になった要素構造において、子要素がイベントをトリガーすると、そのイベントがバブリングのように層ごとに親要素の層に最外層の親要素まで渡されることを意味します。このメカニズムにより、子要素のイベントが要素ツリー全体に伝播され、関連するすべての要素が順番にトリガーされます。イベントバブリングをより深く理解するために、具体的なコード例を見てみましょう。 HTML コード: <divid="parent&q"

jQuery .val() が失敗する理由と解決策 Feb 20, 2024 am 09:06 AM

タイトル: jQuery.val() が失敗する理由と解決策フロントエンド開発では DOM 要素の操作に jQuery がよく使われますが、フォーム要素の値の取得や設定には .val() メソッドが広く使われています。ただし、.val() メソッドが失敗し、フォーム要素の値を正しく取得または設定できない状況が発生することがあります。この記事では、.val() エラーの原因を調査し、対応する解決策を提供し、具体的なコード例を添付します。 1.原因分析.val()メソッド

イベントのバブリングが 2 回トリガーされるのはなぜですか? Feb 22, 2024 am 09:06 AM

イベントのバブリングが 2 回トリガーされるのはなぜですか?イベントバブリング (イベントバブリング) とは、DOM において、要素がイベント (クリックイベントなど) をトリガーすると、イベントがその要素から親要素にバブルアップし、最後に最上位のドキュメントオブジェクトにバブルアップすることを意味します。イベントバブリングは DOM イベントモデルの一部であり、これにより開発者はイベントリスナーを親要素にバインドできるため、子要素がイベントをトリガーすると、バブリングメカニズムを通じてイベントをキャプチャして処理できます。ただし、開発者は、バブルして 2 回トリガーされるイベントに遭遇することがあります。

jsのクリックイベントが繰り返し実行できない理由 May 07, 2024 pm 06:36 PM

JavaScript のクリックイベントは、イベントバブリングメカニズムのため、繰り返し実行できません。この問題を解決するには、次の措置を講じることができます。イベントキャプチャを使用する: イベントがバブルアップする前に起動するイベントリスナーを指定します。イベントの引き継ぎ: イベントのバブリングを停止するには、event.stopPropagation() を使用します。タイマーを使用します。しばらくしてからイベントリスナーを再度トリガーします。

イベントバブリングメカニズムが 2 回トリガーされるのはなぜですか? Feb 25, 2024 am 09:24 AM

イベントのバブリングが 2 回連続して発生するのはなぜですか?イベントバブリングは Web 開発における重要な概念であり、ネストされた HTML 要素でイベントがトリガーされると、イベントが最も内側の要素から最も外側の要素までバブルアップすることを意味します。このプロセスは時々混乱を引き起こす可能性があり、よくある問題の 1 つは、イベントのバブリングが 2 回続けて発生することです。イベントバブリングが 2 回連続して発生する理由をよりよく理解するために、まずコード例を見てみましょう。

vue のイベント修飾子はどのようなシナリオに使用できますか? May 09, 2024 pm 02:33 PM

Vue.js イベント修飾子は、次のような特定の動作を追加するために使用されます。デフォルト動作の防止 (.prevent) イベントバブリングの停止 (.stop) ワンタイムイベント (.once) イベントのキャプチャ (.capture) パッシブイベントリスニング (.passive) アダプティブ修飾子 (.self)キー修飾子 (.key)

バブルアップしない JS イベントはどれですか? Feb 19, 2024 pm 09:56 PM

JS イベントでバブルが発生しない状況にはどのようなものがありますか?イベントバブリング(Event Bubble)とは、要素上でイベントが発生した後、最も内側の要素から最外側の要素に向かってDOMツリーに沿って上方向にイベントが送信されることを意味し、この送信方法をイベントバブリングと呼びます。ただし、すべてのイベントがバブル化できるわけではなく、イベントがバブル化しない特殊なケースもいくつかあります。この記事では、JavaScript でイベントがバブルアップしない状況を紹介します。 1. stopPropagati を使用する

バブリングイベントを防ぐ一般的な方法は何ですか? Feb 19, 2024 pm 10:25 PM

バブリングイベントを防ぐために一般的に使用されるコマンドは何ですか? Web 開発では、イベントのバブリングを処理する必要がある状況によく遭遇します。クリックイベントなどのイベントが要素でトリガーされると、その親要素も同じイベントをトリガーします。イベント配信のこの動作は、イベントバブリングと呼ばれます。場合によっては、イベントがバブルアップするのを防ぎ、イベントが現在の要素でのみ発生し、上位の要素に渡されないようにしたい場合があります。これを実現するには、バブリングイベントを防ぐいくつかの一般的なディレクティブを使用できます。イベント.ストッププロパ

See all articles

JavaScript がイベントのバブリングとイベント自体の発生を防ぐ方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック