jQuery中的事件处理(阻止事件冒泡、阻止默认行为)

时间：2020-05-16 23:44:14 阅读：103 评论：0 收藏：0 [点我收藏+]

1.冒泡事件：

　　举例：点击div元素，body元素也会执行点击事件，从而修改了body背景，但是我们指向修改div的背景

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <input type="text" id="box2">
    
    <script type="text/javascript">
        // jQuery function 入口
        $(document).ready(function(){
            // body元素添加点击事件
            $("body").bind("click",function(){
                // 修改背景颜色
                $(this).css("background-color","yellow")
            })
            
            // div元素添加点击事件
            $("div").bind("click",function(){
                // 修改背景颜色
                $(this).css("background-color","red")
            })
        })
    </script>
</body>

　　输出：

技术分享图片

2.阻止事件冒泡

　　方法1：

　　　　event.stopPropagation() 方法

　　　　语法：

　　　　　　event.stopPropagation()

　　　　示例：

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <input type="text" id="box2">
    
    <script type="text/javascript">
        // jQuery function 入口
        $(document).ready(function(){
            // body元素添加点击事件
            $("body").bind("click",function(){
                // 修改背景颜色
                $(this).css("background-color","yellow")
            })
            
            // div元素添加点击事件
            $("div").bind("click",function(e){
                // 修改背景颜色
                $(this).css("background-color","red")
                // 阻止冒泡
                e.stopPropagation()
            })
        })
    </script>
</body>

　　输出：

技术分享图片

　　方法2：

　　　　return false

　　示例：

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <input type="text" id="box2">
    
    <script type="text/javascript">
        // jQuery function 入口
        $(document).ready(function(){
            // body元素添加点击事件
            $("body").bind("click",function(){
                // 修改背景颜色
                $(this).css("background-color","yellow")
            })
            
            // div元素添加点击事件
            $("div").bind("click",function(e){
                // 修改背景颜色
                $(this).css("background-color","red")
                // 阻止冒泡
                return false
            })
        })
    </script>
</body>

3.默认行为

　　示例：点击<a>标签，不管点击是还是否，都会默认跳转页面

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <input type="text" id="box2"><a id="a" href="#">跳转</a>
    
    <script type="text/javascript">
        // jQuery function 入口
        $(document).ready(function(){
            // body元素添加点击事件
            $("body").bind("click",function(){
                // 修改背景颜色
                $(this).css("background-color","yellow")
            })
            
            // div元素添加点击事件
            $("div").bind("click",function(e){
                // 修改背景颜色
                $(this).css("background-color","red")
                // 阻止冒泡
                return false
            })
                
            $("a").bind("click",function(e){
                var d = window.confirm("您访问的网址存在安全风险，是否继续")
            })
        })
    </script>
</body>

　　输出：都会跳入“#”

技术分享图片

4.阻止默认行为：

　　方法1：

　　　　event.preventDefault() 方法阻止元素发生默认的行为。

　　　　语法：

　　　　　　event.preventDefault()

　　示例：

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <input type="text" id="box2"><a id="a" href="#">跳转</a>
    
    <script type="text/javascript">
        // jQuery function 入口
        $(document).ready(function(){
            // body元素添加点击事件
            $("body").bind("click",function(){
                // 修改背景颜色
                $(this).css("background-color","yellow")
            })
            
            // div元素添加点击事件
            $("div").bind("click",function(e){
                // 修改背景颜色
                $(this).css("background-color","red")
                // 阻止冒泡
                return false
            })
                
            $("a").bind("click",function(e){
                //阻止冒泡
                e.stopPropagation()
                var d = window.confirm("您访问的网址存在安全风险，是否继续")
                if(d==false){
                    // 阻止默认行为
                    e.stopPropagation()
                }
            })
        })
    </script>
</body>

　　输出：点击否，就不会跳转

技术分享图片

　　方法2：

　　　　return false

　　示例：

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <input type="text" id="box2"><a id="a" href="#">跳转</a>
    
    <script type="text/javascript">
        // jQuery function 入口
        $(document).ready(function(){
            // body元素添加点击事件
            $("body").bind("click",function(){
                // 修改背景颜色
                $(this).css("background-color","yellow")
            })
            
            // div元素添加点击事件
            $("div").bind("click",function(e){
                // 修改背景颜色
                $(this).css("background-color","red")
                // 阻止冒泡
                return false
            })
                
            $("a").bind("click",function(e){
                //阻止冒泡
                e.stopPropagation()
                var d = window.confirm("您访问的网址存在安全风险，是否继续")
                if(d==false){
                    return false
                }
            })
        })
    </script>
</body>

总结：

　　return false 即阻止冒泡，又阻止默认行为

jQuery中的事件处理(阻止事件冒泡、阻止默认行为)

原文：https://www.cnblogs.com/abner-pan/p/12902627.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)