阻止事件冒泡以及stopPropagation()，preventDefault()和return false;的区别

最新推荐文章于 2021-11-10 13:59:04 发布

b474440171

最新推荐文章于 2021-11-10 13:59:04 发布

阅读量189

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/myunYao/p/8874735.html

版权

e.preventDefault()是阻止默认事件的方法；

e.stopPropagation()是阻止事件冒泡；

return false;是既阻止事件冒泡又阻止默认事件；

以下是个阻止事件冒泡的小案例：

<!DOCTYPE html>
<html>
<head>
    <title>阻止冒泡</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style type="text/css">
    #div1{
        width: 400px;
        height: 400px;
        background: #f00;
    }
    #div2{
        width: 300px;
        height: 300px;
        background: #0f0;
    }
    #div3{
        width: 200px;
        height: 200px;
        background: #00f;
    }
    #div4{
        width: 100px;
        height: 100px;
        background: #f0f;
    }
</style>
<body>
    <div id="div1">我是div1
        <div id="div2">我是div2
            <div id="div3">我是div3
                <div id="div4">我是div4</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            $("body").on('click', '#div1', function() {
                alert('我是div1')
            }).on('click', '#div2', function() {
                alert('我是div2')
                e.stopPropagation();
            }).on('click', '#div3', function() {
                alert('我是div3')
                e.stopPropagation();
            }).on('click', '#div4', function() {
                alert('我是div4')
                return false;
            });
        })
        
    </script>

</body>
</html>