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

ネストされた 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(); – 要素のバブリングイベントを防止します

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

<p id="c1" onclick="alert(1)">
<p id="c2" onlick="alert(2)">
<input type="button" id="c3" value="点击" onclick="alert(3)">
</p>
</p>

ログイン後にコピー

ログイン後にコピー

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

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

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);

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>

   ログイン後にコピー

   ログイン後にコピー
ここのボタンをクリックすると、ブラウザが表示されます3、2、1 を順に増やしていきます。当初はボタンにバインドされたイベントだけが発生するようにしていましたが、プロジェクト開発中に誤ってイベントをトリガーしてしまいました。ボタンとその親が同時に非常に重要なイベントにバインドされている場合、悲惨な結果になります。現時点での解決策は、バブリングイベントを防ぐことです。

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

関連する推奨事項:

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