js はデフォルトのイベントを防止し、js はイベントのバブリングを防止します。共有するサンプル js はバブリングイベントを防止します_基礎知識

1.event.preventDefault(); -- 要素のデフォルトのイベントを防止します。
注: 要素 a のクリックジャンプのデフォルトイベント、

ボタン、ラジオ、その他のフォーム要素のデフォルト イベント、

div 要素にはデフォルトのイベントがありません

例:

コードをコピー コードは次のとおりです:

百度

コードをコピー コードは次のとおりです。

var samp = document.getElementByTagName("a ");
samp.addEventListener("click",function(e){e.preventDefault()},false);

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

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

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

例:

コードをコピー コードは次のとおりです:

ここでボタンをクリックすると、ブラウザに 3、2、1 が連続して表示されます。本来はボタンにバインドされたイベントだけが発生するようにしていましたが、ここでは誤ってその 2 つの親でイベントをトリガーしてしまいました。プロジェクトの開発中に、ボタンとその親が同時に重要なイベントにバインドされた場合、悲惨な結果になると想像してください。現時点での解決策は、バブリングイベントを防ぐことです。

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

コードをコピーします コードは次のとおりです:

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

わかりました! ！ ！