jQuery 事件

最新推荐文章于 2024-01-26 20:24:09 发布

原创最新推荐文章于 2024-01-26 20:24:09 发布

· 374 阅读

1 ·

版权

文章标签：

#jquery #javascript

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

jQuery

8 篇文章

订阅专栏

本文详细介绍了jQuery中的各种事件，包括鼠标事件、键盘事件、触摸事件、表单事件、文档窗口事件及其处理方法，如事件监听、解绑、委托等。此外，还探讨了事件对象的属性和方法，如`event.type`、`event.target`等，以及如何阻止事件的默认行为和冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery中文开发文档

鼠标事件

click()：单击事件，鼠标按下再弹起，触发绑定的函数
dblclick()：双击事件，鼠标连续双击触发事件
mousedown()/mouseup()：鼠标按下或松开事件
mouseover()/mouseout()：鼠标移入或移出事件，移动到元素后代也会触发
mouseenter()/mouseleave()：鼠标移入或移出事件，移动到元素后代不会触发
mousemove()：鼠标在元素范围内移动事件（不断触发）
hover(fn1, fn2)：同时绑定 mouseenter和 mouseleave事件，分别当鼠标指针进入和离开元素时被执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_属性选择器</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        #box{
            width: 200px; height: 200px; border: 2px solid black;
            margin: 50px auto;
        }
        #box p{
            width: 100px; height: 100px; background: blue;
            margin: 50px auto;
        }
    </style>
    <script>
        $(function(){
           $(function(){
            //    鼠标单击事件   
            //    $("#box").click(function(){
            //        $("#box p").css("background", "red");
            //    })

            //    鼠标双击事件
            //    $("#box").dblclick(function(){
            //        $("#box p").css("background", "red");
            //    })

            //    鼠标按下事件
            //    $("#box").mousedown(function(){
            //        $("#box p").css("background", "red");
            //    })

            //    鼠标松开事件
            //    $("#box").mouseup(function(){
            //        $("#box p").css("background", "red");
            //    })

            //    鼠标移入事件
            //    var count = 0
            //    $("#box").mouseover(function(){
            //        count++;
            //        console.log("鼠标移入" + count);
            //    })

            //    鼠标移出事件
            //    var count = 0
            //    $("#box").mouseout(function(){
            //        count++;
            //        console.log("鼠标移出" + count);
            //    })

            //    鼠标移入事件
            //    var count = 0
            //    $("#box").mouseenter(function(){
            //        count++;
            //        console.log("鼠标移入" + count);
            //    })

            //    鼠标移出事件
            //    var count = 0
            //    $("#box").mouseleave(function(){
            //        count++;
            //        console.log("鼠标移出" + count);
            //    })

            //    鼠标在元素范围内移动事件（不断触发）
            //    var count = 0
            //    $("#box").mousemove(function(){
            //         count++;
            //         console.log("不断触发" + count);
            //    })

            //    同时绑定 mouseenter和 mouseleave事件
               $("#box").hover(function(){
	                 $(this).css("background", "yellow");
	           }, function(){
	                 $(this).css("background", "orange");
	           })
           })
        })
    </script>
</head>
<body>
    <div id="box">
        <p></p>
    </div>
</body>
</html>

键盘事件

keydown()：按键按下
keyup()：按键弹起
keypress()：按键被按下到松开“整个过程”中触发的事件
keypress事件只在按下键盘的任一“字符键”（如A ~ Z、数字键）时触发，单独按下“功能键”（如F1~F12, Ctrl、Alt、shift等’）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发
event.which：指示按了哪个键或按钮

三者顺序：keydown–>keypress–>keyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // 键盘事件主要用于输入时
            // 1、keydown：按键按下
            // $("input").keydown(function(){
            //     $("input").css("background", "#ccc");
            // });

            // 2、keyup：按键弹起
            // $("input").keyup(function(){
            //     $("input").css("background", "#fff");
            // });

            // 3、事件监听，绑定不同事件，执行不同方法
            // $("input").on({
            //     keydown:function(){
            //         $("input").css("background", "#ccc");
            //     },
            //     keyup:function(){
            //         $("input").css("background", "#fff");
            //     }
            // })

            // 4、指定按键触发事件
            // keydown按键按下时，有keyCode按键编码属性
            $("input").keydown(function(event){
                console.log(event.keyCode);
                if(event.keyCode == 13){
                    $("input").css("background", "#ccc");
                }
            });
        })
    </script>
</head>
<body>
    姓名：<input type="text" >
</body>
</html>

触摸事件

触摸事件主要用于移动端；触摸事件应使用事件监听的方法

touchstart：当手指触摸元素时，相当于PC端鼠标按下
touchend：当手指离开元素时，相当于PC端的鼠标松开
touchmove：当手指在元素上移动时，不断触发，相当于PC端的鼠标按下移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>事件处理</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        #box{
            width: 200px; height: 200px; border: 2px solid black;
            margin: 50px auto;
        }
        button{
            width: 100px; height: 50px; background: #ccc;;
            margin: 0 auto; display: block;
        }
    </style>
    <script>
        $(function(){
            // 触摸事件应使用事件监听的方法
            // touchstart事件：当手指触摸元素时，相当于PC端鼠标按下
            // $("button").on("touchstart", function(){
            //     $("#box").css("background", "red");
            // });

            // touchend事件：当手指离开元素时，相当于PC端的鼠标松开
            // $("button").on("touchend", function(){
            //     $("#box").css("background", "blue");
            // });

            // touchmove事件：当手指在元素上移动时，不断触发，相当于PC端的鼠标按下移动
            $("button").on("touchmove", function(){
                console.log("我移动了")
            });  
        })
    </script>
</head>
<body>
    <div id="box"></div>
    <button>点击</button>
</body>
</html>

表单事件

blur()：失去焦点时触发，不支持冒泡
focus()：获取焦点时触发，不支持冒泡
focusin()：获取焦点时触发，支持冒泡
focusout()：失去焦点时触发，支持冒泡
change()：文本发生改变时触发，仅适用于文本域（text、field），以及textarea和select元素。当用于select元素时，change事件会在选择某个选项时发生
select()：当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件
submit()：提交表单时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        input[type="text"]{
            width: 200px; height: 30px;
        }
        input[type="submit"]{
            width: 100px; height: 30px; margin-left: 50px;
        }
    </style>
    <script>
        $(function(){
            // 1、focusin: 获取焦点时触发
            // $("input").focusin(function(){
            //     $(this).css("background", "#ccc");
            // });

            // 2、focusout: 失去焦点时触发
            // $("input").focusout(function(){
            //     $(this).css("background", "#fff");
            // });

            // 3、change: 文本发生改变时触发，仅适用于文本域
            // $("input").change(function(){
            //     $(this).css("background", "#ccc");
            // });

            // 4、submit: 提交表单时触发
            $("form").submit(function(){
                // 1、获取输入的年龄
                var age = $("#age").val();
                // alert(age);
                // 2、判断年龄是否满足条件
                if(age < 60){
                    alert("年龄不到60, 表单不提交");
                };
            });

 			// 5、focusin: 获取焦点时触发,支持冒泡
            $("div").focusin(function(){
                $(this).css("background", "#ccc");
            });

            // 6、focus: 获取焦点时触发,不支持冒泡
            $("div").focus(function(){
                $(this).css("background", "#ccc");
            });
        })
    </script>
</head>
<body>
    <form action="#" method="GET">
        用户:<input type="text" value="OliG"/>
        <br><br><br>
        地址:<input type="text" value="北京"/>
        <br><br><br>
        年龄:<input type="text" id="age" value=""/>
        <br><br><br>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

文档窗口事件

ready()：当页面结构加载完成时触发；$(function(){})是$(document).ready(function(){})的简写方式
resize()：调整浏览器窗口大小的时候触发
scroll()：当浏览器窗口滚动时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{height: 3000px;}
        div{
            width: 200px; height: 200px; border: 1px solid black;
            margin: 50px auto;
        }
        button{
            width: 100px; height: 50px; background: #ccc;
            margin: 0 auto; display: block;
        }
        span{
            position: fixed; top: 10px; right: 10px;
            background: red;
        }
    </style>
    <script>
        $(function(){
            // 1、ready：页面结构加载完成时触发
            // $(document).ready(function(){
            //     $("button").click(function(){
            //         $("#box").css("background", "red");
            //     })
            // })

            // 2、resize：调整浏览器窗口大小的时候触发
            // $(window).resize(function(){
            //     console.log("调整浏览器窗口大小了");
            // })

            // 3、scroll：当浏览器窗口滚动时触发
            // 滚动条的距离scrollTop()、scrollLeft()
            $(window).scroll(function(){
                console.log("浏览器窗口滚动了");
                console.log($(this).scrollTop());
               $("span").text($(this).scrollTop());
            })
        })
    </script>
</head>
<body>
    <div id="box"></div>
    <button>点我</button>
    <span>0</span>
</body>
</html>

事件处理

事件监听

on()：在选定的元素上绑定一个或多个事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        #box{
            width: 200px; height: 350px; border: 2px solid black;
            margin: 50px auto;
        }
        #box p{
            width: 100px; height: 100px; background: blue;
            margin: 50px auto;
        }
    </style>
    <script>
        $(function(){
            // on()事件绑定，可以有4个参数
            // 在选择的元素上绑定一个或多个事件
            // 第一个参数为事件名，多个事件用空格隔开
            // 第二个参数为选择器，筛选后代元素（可选，用得少）
            // 第三个参数为传递数据给事件处理函数（可选，用得少）
            // 第四个参数为事件处理函数

            // 1、常用方式
            // $("#box").on("click", function(){
            //     console.log("鼠标点击了");
            // });
            
            // 2、一个元素绑定多种事件
            // $("#box").on("click mouseleave", function(){
            //     console.log("绑定多个事件");
            // })

            // 3、筛选后代元素，多个元素绑定多种事件
            // $("#box").on("click mouseleave", "p", function(){
            //     console.log("绑定多个事件");
            // })

            // 4、传递数据给事件处理函数
            // $("#box").on("click mouseleave", {yanSe:"red"}, function(e){
            //     $("#box p").css("background", e.data.yanSe);
            // })

            // 5、绑定多个不同事件，各事件执行不同函数
            $("#box").on({
                click:function(){
                    console.log("鼠标单击了");
                },
                mouseenter:function(){
                    console.log("鼠标移入了");
                },
                mouseleave:function(){
                    console.log("鼠标移出了");
                }
            })
        })
    </script>
</head>
<body>
    <div id="box">
        <p></p>
        <p></p>
    </div>
</body>
</html>

事件解绑

off()：解除绑定的某一指定的事件或者多有事件（对同一元素绑定的多个同一个事件进行解绑，可以使用命名空间解决，例如“click.a”, “click.b”）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        #box{
            width: 200px; height: 200px; border: 2px solid black;
            margin: 50px auto;
        }
        button{
            width: 100px; height: 50px; background: #ccc;;
            margin: 0 auto; display: block;
        }
    </style>
    <script>
        $(function(){
            // 绑定多个不同事件，各事件执行不同函数
            $("#box").on({
                click:function(){
                    console.log("鼠标单击了");
                },
                mouseenter:function(){
                    console.log("鼠标移入了");
                },
                mouseleave:function(){
                    console.log("鼠标移出了");
                }
            });

            // off()方法用于移除通过on()方法添加的事件处理程序
            $("button").on("click", function(){
                // 移除#box绑定的事件
                //  $("#box").off();//移除所有事件

                // $("#box").off("click");//移除某个事件

                $("#box").off("mouseenter mouseleave");//移除多个事件
            })
        })
    </script>
</head>
<body>
    <div id="box"></div>
    <button>点击</button>
</body>
</html>

事件委托

动态创建的元素对象，无法通过事件绑定添加对象，因为动态创建的对象是后添加的，而代码从上至下执行，所以无法查找动态添加的元素对象，也就无法对其进行事件绑定了

通过事件冒泡，让子元素绑定的事件冒泡到父元素（或祖先元素）上，然后在进行选择处理，语法如下：

$(祖先元素).on(“事件”, “限定元素”, function(){ 执行代码块 })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        div{width: 100px; height: 100px; border: 1px solid green; float: left;}
        input{width: 102px; height: 30px;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <input type="button" value="事件绑定" id="btn1">
    <script>
        $(function(){
            // 事件委托
            // 动态绑定事件
            $("#btn1").on("click", function(){
                $("<div></div>").appendTo($("body"));
            })
            // $("div").on("click", function(){
            //     $(this).css("background", "orange");
            // })//动态创建的div无样式效果，通过事件委托解决，如下

            $(document).on("click", "div", function(){
                $(this).css("background", "orange");
            })

			// 移除事件委托
            $(document).off("click", "div");
        })
    </script>
</body>
</html>

事件处理方法

one()：为每一个匹配元素的特定事件绑定一个一次性的事件处理函数（通过one()函数绑定的事件处理函数都是一次性的，只有首次触发事件时会执行该事件处理函数。触发之后jQuery就会移除当前事件绑定）
trigger()：在每一个匹配的元素上触发某类事件（一般用在自定义事件上）
triggerHandler()：触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡
trigger与triggerHandler的区别
1、triggerHandler不会引起事件的默认行为
2、trigger会操作匹配的所有元素，而triggerHandler只影响第一个匹配元素
3、triggerHandler创建的事件不会产生事件冒泡
4、triggerHandler返回的是事件处理函数的返回值，而不是具有可链性的JQuery对象。如果没有处理程序被触发，则这个方法返回undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理方法</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        input{width: 102px; height: 30px;}
        #div1{width: 200px; height: 200px; border: green 1px solid;}
        #div2{width: 100px; height: 100px; border: green 1px solid; margin: 50px auto;}
        #div3{width: 50px; height: 50px; border: green 1px solid;margin: 25px auto;}
    </style>
</head>
<body>
    <input type="button" value="事件触发" id="btn1">
    <hr>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
    <form action="http://www.baidu.com" id="form1">
        姓名：<input type="text" id="user">
        密码：<input type="text" id="password">
        <input type="submit" value="提交">
    </form>
    <script>
        $(function(){
            // one()函数绑定的事件处理函数都是一次性的，包括事件委托
            // $("#btn1").one("click",function(){
            //     // alert("one");
            //     $("<div></div>").appendTo($("body"));
            // })

            // 使用trigger触发
            // $("#btn1").click(function(){
            //     alert("trigger");
            // })
            // $("#btn1").trigger("click");

            // 简写方式1
            // $("#btn1").click(function(){alert("trigger")}).trigger("click");
            // 简写方式2
            // $("#btn1").click(function(){alert("trigger")}).click();

            // 自定义事件
            // $(document).on("myEvent", function(){
            //     alert("Game Over!");
            // }).trigger("myEvent");
            
            // trigger额外数据,如果有多条数据时需要放到[]中
            // $("#btn1").on("click", 300, function(e, data1, data2){
            //     alert("trigger: " + data1 + "," + data2 + "," + e.data)
            // }).trigger("click", [100, "hahaha"]);

/
            // triggerHandler触发
            // $("#btn1").click(function(){
            //     alert("triggerHandler");
            // })
            // $("#btn1").triggerHandler("click");

            // trigger与triggerHandler区别
            // 1、不会引起事件默认行为
            // $("#form1").trigger("submit");//跳转
            // $("#form1").triggerHandler("submit");//不跳转

            // 2、只操作第一个匹配元素
            // $("div").click(function(){
            //     $(this).css("border", "red 5px solid");
            // }).triggerHandler("click");//只触发操作一个

            // 3、不会产生事件冒泡
            // $("div").click(function(){
            //     alert("div");
            // })//冒泡

            // $("#div3").trigger("click");//冒泡

            // $("#div3").triggerHandler("click");//只触发div3

            
            // 4、返回事件处理函数的返回值
            // alert($("#btn1").on("click", function(){
            //     alert("trigger");
            //     return 100;
            // }).triggerHandler("click"));//100

            //4.1 trigger具有链性，可持续操作，而triggerHandler不行
            $("#btn1").on("click", function(){
                alert("trigger");
                return 100;
            }).triggerHandler("click").css("background", "orange");
        })
    </script>
</body>
</html>

事件对象

event对象的属性

event.type：描述事件的类型
event.target：触发该事件的DOM元素（自身元素）
event.currentTarget：在事件冒泡阶段中的当前DOM元素，等同于“this”
event.relatedTarget：获取鼠标进入或退出目标点的那个元素
event.data：事件调用时的额外数据
event.pageX /event.pageY：显示鼠标相对于元素文件的左侧和顶部边缘的位置
注意区分：
screenX、screenY：获取显示器屏幕位置的坐标
clientX、clientY：获取相对于页面视口的坐标
event.result：这个属性包含了当前事件最后触发的那个处理函数的返回值（如果为DOM元素的同一事件类型绑定了多个事件处理函数，你可以使用result属性获取上一个事件处理函数执行的返回值）
event.timeStamp：属性用于返回当前事件触发的时间值。这个时间值是距离1970年1月1日的毫秒数
event.which：针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮（event.which将event.keyCode和event.charCode标准化了。推荐使用event.which 来监视键盘输入）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        div{width: 100px; height: 40px; 
        border: green 1px solid;}
        p{width: 50px; height: 20px; background: green;}
        #xy{width: 300px; position: fixed;}
        body{height: 3000px;}
    </style>
</head>
<body>
    <h3>JQ事件对象</h3>
    <div id="div1"><p></p></div>
    <input type="button" value="事件对象" id="btn1"><br>
    <input type="text" id="xy">
    <script>
        $(function(){
            // $("#btn1").click(function(e){
                // 获取触发事件名称
                // alert(e.type);//click

                // 触发该事件的DOM元素
                // alert(e.target.value);
            // })

            // $("#div1").click(function(e){
                // Target：点击哪个元素就是哪个元素事件
                // alert("target:" + e.target.tagName);
                // currentTarget：给哪个元素添加事件，返回就是哪个元素
                // 如给div1添加click事件，返回的就是div1元素
                // alert("currentTarget:" + e.currentTarget.tagName);
            // })

            // relatedTarget事件:获取鼠标进入或退出目标点的元素
            // $("div").mouseover(function(e){
            //     alert(e.relatedTarget);
            // })
            // $("div").mouseout(function(e){
            //     alert(e.relatedTarget);
            // })

            // 额data事件 外数据:数字、字符串、数组、对象等
            // $("#btn1").click(2020, function(e){
            //     alert(e.data);
            // })
            // $("#btn1").click("Hello", function(e){
            //     alert(e.data);
            // })
            // $("#btn1").click({name:"OliGit"}, function(e){
                // alert(e.data.name);
            // })

            // pageX/pageY事件
            // $(document).click(function(e){
            //     $("#xy").val("e.pageY:" + e.pageY + "  e.screenY:" + e.screenY +"  e.clientY:" + e.clientY )
            // })

            // result事件
            // $("#btn1").click(function(){
            //     return 100;
            // })
            // $("#btn1").click(function(e){
            //     alert(e.result)
            // })
            
            // timeStamp事件,不成功
            // $(document).click(function(e){
            //     alert(e.timeStamp);
            //     var time = new Date(e.timeStamp);
            //     alert(time.toLocaleString());
            // })

            // event.which事件
            $(document).mousedown(function(e){
                alert(e.which);
            })
        })
    </script>

</body>
</html>

event对象的方法

event.preventDefault()：阻止事件的默认动作
event.isDefaultPrevented()：判断event对象是否调用了上面的方法
event.stopPropagation()：防止事件冒泡
event.isPropagationStopped()：判断event对象是否调用了上面的方法
event.stopImmediatePropagetion()：阻止剩余的事件处理函数执行并且防止事件冒泡
event.isImmediatePropagetionStopped()：判断event对象是否调用了上面的方法
如果想同时阻止冒泡和默认行为可以在函数内return false来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件方法</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        div{width: 200px; height: 200px;
            border: 1px solid green;}
        #pid{width: 150px; height: 150px;
            border: 1px solid blue; margin:25px}
        #aid{width: 100px; height: 50px; margin: 25px auto; line-height: 50px;
            border: 1px solid red; display: block; text-align: center;}
    </style>
</head>
<body>
    <h3>JQ事件对象方法</h3>
    <div id="div1">
        <p id="pid"><a href="https://blog.csdn.net/UserPython/article/details/105798499" id="aid" target="_blank">OliGit</a></p>
    </div>
    <script>
        $(function(){
            // 点击a标签默认跳转网页
            $("#aid").click(function(e){
                //阻止默认动作
                // e.preventDefault();
                // alert(e.isDefaultPrevented());
            })

            // 阻止冒泡事件
            // $("#aid").click(function(e){
            //     // e.stopPropagation();
            //     // alert("AAA");
            //     // alert(e.isPropagationStopped());

            //     // 阻止后续函数处理以及冒泡/
            //     e.stopImmediatePropagation();
            //     alert("AAA");
            //     // alert(e.isImmediatePropagationStopped());
            // })
            // $("#pid").click(function(e){
            //     // e.stopPropagation();
            //     alert("PPP");
            // })
            // $("#div1").click(function(e){
            //     // e.stopPropagation();
            //     alert("DIV");
            // })
            // $(document).click(function(e){
            //     // e.stopPropagation();
            //     alert("Document");
            // })

            // // 阻止后续函数处理以及冒泡
            // $("#aid").click(function(){
            //     alert("BBB");
            // })

            //
            // 同时阻止事件冒泡和默认行为
            $("#aid").click(function(e){
                // 方式一：同时添加event的两个方法
                // e.stopPropagation();
                // e.preventDefault();

                // 方式二：返回 false
                alert("AAA");
                return false;
            })
            $("#pid").click(function(e){
                alert("PPP");
            })
            $("#div1").click(function(e){
                alert("DIV");
            })

        })
    </script>
</body>
</html>