JS如何阻止事件冒泡、捕获和默认行为

最编程 2024-01-11 13:53:22

...

1,防止冒泡和捕获

w3c 的方法是 e.stopPropagation()
IE 是使用 e.cancelBubble = true

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>(runoob.com)</title>
    <div id='box1' onClick=alert('box1点击事件')>
        <h2>box1盒子</h2>
        <div id='box2'>
            <h3>
                box2盒子
            </h3>
        </div>
    </div>
</head>
<body>

<script>
    var box2 = document.getElementById('box2')
    box2.onclick = function(e) {
        alert('box2点击事件');
        var event = e||window.event;
        event.cancelBubble ? event.cancelBubble = true : event.stopPropagation();
    }

</script>

</body>
</html>

2,默认事件

1，什么是默认事件：

a 标签 href 属性上的跳转
鼠标右键呼出菜单
form 表单里 button 标签和 type 属性为 submit 的 input 标签的提交

2，取消默认事件

w3c 的取消默认事件方法是 e.preventDefault()
IE9 以下是使用 e.returnValue = false

1）a 标签默认时间的取消

document.getElementById('aaa').onclick =
function(e){
  var event = e || window.event
  if(e.preventDefault){
    e.preventDefault()
  } else {
    event.returnValue = false
  }
}

2) 右键呼出菜单默认事件的取消

document.oncontextmenu = function(e){
    var event = e || window.event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        event.returnValue = false;
    }
}

3）表单的默认事件——提交事件的取消

document.getElementsByClassName(“user-info”)[0].onsubmit = function(e){
var event = e || window.event;
  if(event.preventDefault){
    event.preventDefault();
  }else{
    event.returnValue = false;
  }
}

3,return false

return false 只能阻止默认行为，不阻止默认冒泡。但是 jquery 的 return false 既能阻止默认行为，也能阻止冒泡

1）原生 JS，只阻止默认行为，不阻止冒泡

<div onclick=alert('222')>
    box1
    <div onclick=alert('111')>
        box2
        <a id="aaa" href="https://www.baidu.com/">百度</a>
    </div>
</div>

<script>
    document.getElementById('aaa').onclick = function(){
        return false
    }
</script>

2)jQ，既阻止默认行为，也阻止冒泡

<div onclick=alert('222')>
    box1
    <div onclick=alert('111')>
        box2
        <a id="aaa" href="https://www.baidu.com/">百度</a>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $("#aaa").on('click',function(){
    return false;
});
</script>

在使用 return false 过程中发现，如果使用

// return false起了阻止默认事件行为

<script>
    document.getElementById('aaa').onclick = function(){
        return false
    }
</script>

// return false没有起作用

document.getElementById('aaa').addEventListener('click', function () {
    return false
})

上一篇：如何阻止JavaScript事件冒泡

下一篇：如何阻止冒泡&&浏览器默认行为

JS如何阻止事件冒泡、捕获和默认行为

1,防止冒泡和捕获

2,默认事件

1，什么是默认事件：

2，取消默认事件

3,return false

在使用 return false 过程中发现，如果使用

阻止事件冒泡，阻止默认事件，event.stopPropagation和event.preventDefault，return false的区别-1.event.stopPropagation方法

阻止JS冒泡和取消默认事件(默认行为)

讲解如何使用JavaScript阻止事件冒泡和默认行为

如何使用JavaScript阻止事件冒泡及取消浏览器的默认行为

如何停止JS事件冒泡和事件穿透

浅谈jQuery 中的事件冒泡和阻止默认行为

如何在JavaScript中阻止冒泡和取消默认事件(默认行为)

如何停止JavaScript冒泡和阻止浏览器默认行为

如何在vue.js中阻止事件冒泡

如何阻止冒泡&&浏览器默认行为