ホームページ > 記事 > ウェブフロントエンド > 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 にジャンプすることはありません。
注: 通常、ネストされた要素にはバブリングイベントがあり、特定の効果があります
例:
<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);ネストされた 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 にジャンプすることはありません。
例:
<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);
関連する推奨事項:
js 関数の一般的な書き方と呼び出し方法 AJAX でネイティブ JS の json を読み取るプロセス全体vue.js のインストールと構成以上がjsはデフォルトのイベントを防ぎ、jsはイベントのバブリングを防ぎます。共有する例はjsはバブリングイベントを防ぎますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。