JavaScript イベントのキャンセルとバブリングの防止に関する簡単な説明

デフォルトの操作をキャンセルします

w3c メソッドは e.preventDefault()、IE は e.returnValue = false;

addEventListener() をサポートしますブラウザでは、時間オブジェクトのPreventDefault() メソッドを呼び出して、時間のデフォルトの操作をキャンセルすることもできます。ただし、IE9 より前の IE では、イベント オブジェクトの returnValue プロパティを false に設定することで、同じ効果を得ることができます。次のコードは、3 つのキャンセル手法をすべて使用するイベント ハンドラーを前提としています。

function cancelHandler(event){
  var event = event || window.event;  //用于IE
  if(event.preventDefault) event.preventDefault();  //标准技术
  if(event.returnValue) event.returnValue = false;  //IE
  return false;   //用于处理使用对象属性注册的处理程序
}

現在のドラフト DOM イベント モデルは、Event オブジェクト プロパティ defaultPrevented を定義します。

return false

javascript の return false はデフォルトの動作を阻止するだけですが、jQuery を使用するとデフォルトの動作を阻止し、オブジェクトのバブリングを阻止します。

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

var a = document.getElementById("testB");
　　a.onclick = function(){
　　return false;
};

バブリングを防ぐには

w3c のメソッドは e です。 stopPropagation()、IE は e.cancelBubble = true を使用します

addEventListener() をサポートするブラウザでは、イベント オブジェクトの stopPropagation() メソッドを呼び出して、イベントが伝播し続けるのを防ぐことができます。同じオブジェクトに他のハンドラーが定義されている場合でも、残りのハンドラーは引き続き呼び出されますが、stopPropagation() メソッドの呼び出しは、イベントの伝播中にいつでも呼び出すことができます。このメソッドは、キャプチャ フェーズ、イベント ターゲット自体、およびイベントの伝播中にいつでも呼び出すことができます。リスクバブル段階。

IE9 より前の IE は stopPropagation() メソッドをサポートしていません。対照的に、IE イベント オブジェクトには cancleBubble プロパティがあり、このプロパティを true に設定すると、イベントがさらに伝播されなくなります。 (IE8 以前のバージョンでは、イベント伝播のキャプチャ フェーズがサポートされていないため、キャンセルされるイベント伝播はバブリングだけです。)

現在の DOM イベント仕様ドラフトでは、Event オブジェクトに stopImmediatePropagation という名前の別のメソッドが定義されています ( ）。 stopPropagation() と同様、このメソッドは他のオブジェクトからのイベントの伝播を防ぎますが、同じオブジェクトに登録されている他のイベント ハンドラーの呼び出しも防ぎます。

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

function stopHandler(event)
    window.event?window.event.cancelBubble=true:event.stopPropagation();
}

上記はこの記事の全内容です。気に入っていただければ幸いです。

その他の関連チュートリアルについては、JavaScript ビデオ チュートリアル

をご覧ください。