ホームページ  >  記事  >  ウェブフロントエンド  >  jsはデフォルトのイベントを防ぎ、jsはイベントのバブリングを防ぎます。共有する例はjsはバブリングイベントを防ぎます

jsはデフォルトのイベントを防ぎ、jsはイベントのバブリングを防ぎます。共有する例はjsはバブリングイベントを防ぎます

jacklove
jackloveオリジナル
2018-06-15 16:48:221615ブラウズ

ネストされた p 要素の場合、親要素と子要素の両方が何らかのイベントにバインドされている場合、最も内側の子要素がクリックされたときに親要素のイベントがトリガーされることがあります。 ここでは、デフォルトのイベントを防ぐ js とイベントを防ぐ js について紹介します。例を参照してください
1.event.preventDefault(); 要素のデフォルトイベントを防止します。
注: 要素のクリック ジャンプのデフォルト イベント、
ボタン、ラジオ、その他のフォーム要素のデフォルト イベント、
p 要素にはデフォルト イベントはありません
例:

<a href="http://www.baidu.com" target="_black">百度</a>var samp = document.getElementByTagName("a");
samp.addEventListener("click",function(e){e.preventDefault()},false);

説明: リンクをクリックすると、ジャンプが発生します通常の状況では、デフォルトのイベント、つまりジャンプ イベントがブロックされているため、Baidu にジャンプすることはありません。

  1. event.stopPropagation(); – 要素のバブリングイベントを防止します

    注: 通常、ネストされた要素にはバブリングイベントがあり、特定の効果があります
    例:

  2. <p id="c1" onclick="alert(1)">
    <p id="c2" onlick="alert(2)">
    <input type="button" id="c3" value="点击" onclick="alert(3)">
    </p>
    </p>
ここのボタンをクリックすると、ブラウザが表示されます3、2、1 を順に増やしていきます。当初はボタンにバインドされたイベントだけが発生するようにしていましたが、プロジェクト開発中に誤ってイベントをトリガーしてしまいました。ボタンとその親が同時に非常に重要なイベントにバインドされている場合、悲惨な結果になります。現時点での解決策は、バブリングイベントを防ぐことです。

入力のクリック イベントを登録し、バブリング イベントを防止します

document.getElementById(&#39;c3&#39;).addEventListener(&#39;click&#39;,function(e){e.stopPropagation()},false);

ネストされた p 要素の場合、親要素と子要素の両方が何らかのイベントにバインドされている場合、最も内側の子要素がクリックされたときに親要素がトリガーされる可能性があります イベントはこちらデフォルトイベントを防止するjsとイベントバブリングを防止するjsの例です。

1.event.preventDefault(); 要素のデフォルトイベントを防止します。
注: 要素のクリック ジャンプのデフォルト イベント、
ボタン、ラジオ、その他のフォーム要素のデフォルト イベント、
p 要素にはデフォルト イベントはありません
例:

<a href="http://www.baidu.com" target="_black">百度</a>var samp = document.getElementByTagName("a");
samp.addEventListener("click",function(e){e.preventDefault()},false);

説明: リンクをクリックすると、ジャンプが発生します通常の状況では、デフォルトのイベント、つまりジャンプ イベントがブロックされているため、Baidu にジャンプすることはありません。

    event.stopPropagation(); – 要素のバブリングイベントを防止します
  1. 注: 通常、ネストされた要素にはバブリングイベントがあり、特定の効果があります

    例:

    <p id="c1" onclick="alert(1)">
    <p id="c2" onlick="alert(2)">
    <input type="button" id="c3" value="点击" onclick="alert(3)">
    </p>
    </p>
  2. ここのボタンをクリックすると、ブラウザが表示されます3、2、1 を順に増やしていきます。当初はボタンにバインドされたイベントだけが発生するようにしていましたが、プロジェクト開発中に誤ってイベントをトリガーしてしまいました。ボタンとその親が同時に非常に重要なイベントにバインドされている場合、悲惨な結果になります。現時点での解決策は、バブリングイベントを防ぐことです。
入力のクリックイベントを登録し、そのバブリングイベントを阻止します

document.getElementById(&#39;c3&#39;).addEventListener(&#39;click&#39;,function(e){e.stopPropagation()},false);

この記事では、js ブロックのデフォルトイベントと js ブロックのバブリングイベントの例について説明します。

関連する推奨事項:

js 関数の一般的な書き方と呼び出し方法


AJAX でネイティブ JS の json を読み取るプロセス全体


vue.js のインストールと構成

以上がjsはデフォルトのイベントを防ぎ、jsはイベントのバブリングを防ぎます。共有する例はjsはバブリングイベントを防ぎますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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