jQuery学习笔记13-事件冒泡和默认行为

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

weeds606

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

阅读量162

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/100151021

版权

前端相关专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件冒泡和默认行为</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: #FFEE00;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="jQuery/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            * 1.什么是事件冒泡
            * 给标签及上级绑定事件时，标签触发事件同时会触发上级标签的事件
            * 如下所示，son属性div为father属性div的子标签。
            * son属性的div绑定弹出son弹框的点击事件，
            * father属性的div绑定弹出father弹框的点击事件
            * 此时我们点击son属性的div，会同时弹出son弹框及father弹框
            * */
            // $(".son").click(function () {
            //     alert("son")
            // });
            // $(".father").click(function () {
            //     alert("father")
            // });

            /*
            * 2.阻止事件冒泡
            * 方法一、return false
            * 方法二、函数添加event回调，函数体添加event.stopPropagation()
            * 点击son属性的div，不会弹出father弹框
            * */
            //方法一、return false
            // $(".son").click(function () {
            //     alert("son");
            //     return false
            // });
            //方法二、函数添加event回调，函数体添加event.stopPropagation()
            $(".son").click(function (event) {
                alert("son");
                event.stopPropagation();
            });
            $(".father").click(function () {
                alert("father");
            });

            /*默认行为
            * html中有些标签点击后，就有默认行为。比如点击a标签，就会跳转指定连接
            * form表单中，点击提交按钮，就会跳转到指定地址
            * 阻止默认行为
            * 点击a标签只执行jQuery绑定的事件，不执行链接跳转
            * 方法一、return false
            * //    方法二、函数添加event回调，函数体添加event.preventDefault()
            * */
        //    给a标签添加点击事件后，点击弹框的确定按钮，就会跳转到百度首页。
        //    现在需要点击确定后不进行跳转，此时就要去除a标签的默认事件
        //    方法一、return false
            $("a").click(function () {
                alert("注册");
                return false
            });
            //    方法二、函数添加event回调，函数体添加event.preventDefault()
            $("a").click(function (event) {
                alert("注册");
                event.preventDefault();
            })


        })
    </script>
</head>
<body>
<div class="father">
    <div class="son">
        
    </div>
</div>
<a href="https://www.baidu.com/">注册</a>
<form action="https://www.taobao.com/">
    <input type="text">
    <input type="submit">提交
</form>
</body>
</html>

weeds606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记13-事件冒泡和默认行为

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery事件冒泡和默认行为</title> <style> *{ margin: 0; ...
复制链接

扫一扫