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

最新推荐文章于 2022-11-03 22:22:45 发布

蓝陌丶

最新推荐文章于 2022-11-03 22:22:45 发布

阅读量298

点赞数 1

分类专栏： js、jquery 文章标签： javascript

本文链接：https://blog.csdn.net/u011140030/article/details/53486780

版权

js、jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

停止冒泡
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
一般来说使用下面一行代码就可以解决！

window.event? window.event.cancelBubble = true : e.stopPropagation();

举例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div id='div' onclick='alert("div");'>
        <ul onclick='alert("ul");'>
            <li id='test'>test</li>
        </ul>
    </div>

    <script type="text/javascript">
        $('#test').click(function () {
            alert('li');
        });
    </script>
</body>
</html>

这时候点击test会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。
然而在li标点点击事件的function中添加window.event? window.event.cancelBubble = true : e.stopPropagation();则只会触发alert( “li” );阻止目标元素的事件冒泡到父级元素。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div id='div' onclick='alert("div");'>
        <ul onclick='alert("ul");'>
            <li id='test'>test</li>
        </ul>

    <script type="text/javascript">
        $('#test').click(function (e) {
            window.event? window.event.cancelBubble = true : e.stopPropagation();
            alert('li');
        });
    </script>

    </body>
</html>

阻止默认行为
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使元素本身有默认行为，调用preventDefault也是不会起作用的。

如：以下代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
    <a href='http://www.baidu.com' id="testA">百度</a>
</body>
</html>

点击百度时会跳转！如果将代码变为如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
    <a href='http://www.baidu.com' id="testA">百度</a>

    <script type="text/javascript">
        var a = document.getElementById("testA");
        $('a').click(function(e){
            if(e.preventDefault){
                e.preventDefault();
            }else{
                window.event.returnValue == false;
            }
        });
    </script>
</body>
</html>

此时再点击百度也不会跳转！这就是阻止浏览器默认行为

return false

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

下面这个使用原生js，只会阻止默认行为，不会停止冒泡

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div id='div' onclick='alert("div");'>
        <ul onclick='alert("ul");'>
            <li id='test'>test</li>
            <a href='http://www.baidu.com' id="testA">百度</a>
        </ul>

    <script type="text/javascript">
        var a = document.getElementById("testA");
        a.onclick = function()
        {
            return false;
        }
    </script>

    </body>
</html>