ホームページ > 記事 > ウェブフロントエンド > バブリングを防ぐjsとデフォルトイベント（デフォルトの動作）について詳しく解説
バブリングを防ぐjsとデフォルトイベント（デフォルトの動作）について詳しく解説
- 高洛峰オリジナル
- 2016-12-09 15:23:501309ブラウズ
この記事の例では、参考のためにバブリングを防ぐ方法とjsのデフォルトのイベントメソッドを共有します。具体的な内容は次のとおりです
バブリングを防止します。バブリングの簡単な例は、息子が秘密のメッセージを知っていて、父親がそれを知っていて、再び祖父に伝えることです。バブリングを防ぐために、息子はそれを許可されません。もちろんおじいちゃんには言いません。以下の domo が良い例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 300px;
height: 300px;
background: red;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function(ev) {
var oEvent = ev || event;
box.style.display = 'block';
//oEvent.cancelBubble = true;//高版本浏览器
stopBubble(oEvent);
//在低版本的chrome和firefox浏览器中需要兼容性处理
//高版本chrome和firefox浏览器直接使用上面这行代码即可
}
document.onclick = function() {
box.style.display = 'none';
}
}
//阻止冒泡事件的兼容性处理
function stopBubble(e) {
if(e && e.stopPropagation) { //非IE
e.stopPropagation();
} else { //IE
window.event.cancelBubble = true;
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="语言" />
<div id="box"></div>
</body>
</html>私が達成した効果は次のとおりです。ボタンをクリックするとボックスが表示され、他の場所をクリックするとボックスが消えます。
バブリングを防止しない場合、最初のボタンはボックスを表示するためのクリック時間をトリガーしますが、ボックスはドキュメントに含まれているため、バブリングしてドキュメントのクリックイベントをトリガーし、ボックスが消えます。このイベントの実行シーケンスは、さまざまなクリック イベントのアラートを使用して確認できます。 cancelBubble の互換処理については、chrome や firefox の上位バージョンでは互換処理が不要となり、oEvent.cancelBubble = true を直接使用することができます。ブラウザ イベントを防ぐための次の互換性処理も、ブラウザの上位バージョンでは必要ありません。
デフォルトのイベント。つまり、ブラウザ自体の機能です。
function preventDefa(e){
if(window.event){
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
else{
//阻止默认浏览器动作(W3C)
e.preventDefault();
}
}
これは互換性を考慮した書き方ですが、上位バージョンのブラウザに対応するだけであれば上記のように一文だけで十分です。
りー
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。