26-jQuery事件冒泡和默认行为

最新推荐文章于 2021-03-10 21:27:05 发布

杨亚仑

最新推荐文章于 2021-03-10 21:27:05 发布

阅读量145

点赞数

分类专栏： jQuery入门练习

本文链接：https://blog.csdn.net/yangyalun/article/details/82971799

版权

jQuery入门练习专栏收录该内容

60 篇文章 0 订阅

订阅专栏

1.什么是事件冒泡？

儿子响应事件，此事件会传给他父亲

2.如何阻止事件冒泡

在儿子事件中加return return false或者event.stopPropagation();

3.什么是默认行为

默认行为就是一些标签自带的默认事件，比如a标签和submit标签

4.如何阻止默认行为

通过添加return false或event.preventDefault()来阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-jQuery事件冒泡和默认行为</title>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script>
         $(function () {
                 //    编写jQuery相关代码
             /*
             * 1.什么是事件冒泡？
                儿子响应事件，此事件会传给他父亲
             * 2.如何阻止事件冒泡
               在儿子事件中加return  return false或者event.stopPropagation();
             * 3.什么是默认行为
                默认行为就是一些标签自带的默认事件，比如a标签和submit标签
             * 4.如何阻止默认行为
                通过添加return false或event.preventDefault()来阻止默认事件
             * */
         /*    $(".son").click(function (event) {
                 alert("son");
                 // return false;
                  event.stopPropagation();
             });
             $(".father").click(function () {
                 alert("father");
             })*/

         $("a").click(function (event) {
             alert("弹出注册框")
            // return false;
             event.preventDefault();

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