为什么在a标签的父元素上return false a标签也不能跳转

以前一直认为只是在a标签的点击事件上return false 点击a标签就不能跳转直到几天前做项目有个需求我为了防止冒泡然后图方便就在a标签的父元素上绑定点击事件return false 结果点击a标签也不能跳转这是为啥以下是我的demo代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div>
        <a href="http://www.baidu.com">baidu</a>
    </div>
    <script>
    document.querySelector('div').onclick = function(event) {
        return false
    }
    </script>
</body>

</html>

点击并不能跳转望大神告知原因

javascript

阅读 4.9k

7 个回答

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div>
        <a href="http://www.baidu.com">baidu</a>
    </div>
    <script>
    document.querySelector('div').onclick = function(event) {
        event.preventDefault();
         location.href = "http://www.baidu.com";
    }
    </script>
</body>

</html>

你可以改成这样，
用event.preventDefault();阻止默认事件，
然后location.href跳转

王能全是谁

1.1k1614

发布于
2017-09-22

更新于
2017-09-22

可能是DOM0级方法中 return false有event.preventDefault()的作用，a事件冒泡到div后，默认行为被阻止

keepeye

169117

发布于
2017-09-22

由于事件冒泡，然后 return false 阻止了事件默认行为(即跳转)，但是不建议用return false的方式来取消事件或阻止默认行为，改用对应的 event.preventDefault 和 event.stopPropagation

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。

DOM0监听捕获阶段的事件，上面已经有人回答过了

如果你改成DOM2级事件，在冒泡事件流中，a就会进行跳转。

        document.querySelector("div").addEventListener("cilck",function(event){
            console.log(event.target);
            return false;
        });