jQuery事件冒泡和默认行为

Love The Way You Lie 2022-03-12 11:18 215阅读 0赞

在jQuery的事件冒泡和默认行为中，需要掌握四样东西。希望下面的代码会对大家有所帮助。在控制台中一段一段的查看运行效果。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery事件冒泡和默认行为</title>
        <style> *{ margin: 0; padding: 0 } .father{ width: 200px; height: 200px; background: red } .son{ width: 100px; height: 100px; background: blue; } </style>
        <script src="js/jquery.js"></script>
       	<script> $(function(){ /* 1.什么是事件冒泡 2.如何阻止事件冒泡(两种方式，如下) 3.什么是默认行为？ 4.如何阻止默认行为(两种方式，如下) */ /* $(".son").click(function(event){ alert("son");//默认会执行father的方法 //return false;//当点击".son"后，不会再执行father的方法 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>

若有任何疑问或是不解，请在下方评论留言，谢谢。

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

桃扇骨/ 2024年04月17日 18:47/ 0 赞/ 52 阅读

相关 [JavaScript]取消默认行为和事件冒泡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

小鱼儿/ 2022年11月27日 10:17/ 0 赞/ 147 阅读

相关关于事件冒泡和浏览器默认行为

GoodSite：http://caibaojian.com/javascript-stoppropagation-preventdefault.html : htt

绝地灬酷狼/ 2022年08月05日 15:12/ 0 赞/ 205 阅读

相关 javascript阻止冒泡和默认事件（默认行为）

阻止冒泡。冒泡简单的举例来说，儿子知道了一个秘密消息，它告诉了爸爸，爸爸知道了又告诉了爷爷，一级级传递从而引起事件的混乱，而阻止冒泡就是不让儿子告诉爸爸，爸爸自然不会告诉爷爷了

小灰灰/ 2022年07月16日 08:56/ 0 赞/ 273 阅读

相关 Jquery——Day3（事件对象+事件冒泡+默认行为阻止）

1、事件对象即event对象，通过处理函数默认传递接受。 //通过处理函数传递事件对象； $(function(){ $("input").bi

忘是亡心i/ 2022年07月12日 13:08/ 0 赞/ 257 阅读

相关 javascript-阻止事件冒泡和事件默认行为

1.事件冒泡（1-1）冒泡是什么？事件冒泡就像热水沸腾时产生汽泡往上升的情形一样(往上传递的过程),事件冒泡出现的情况:假设一个html结构中两个标签存在父子层级

旧城等待，/ 2022年06月12日 03:57/ 0 赞/ 299 阅读

相关 jQuery中的冒泡和默认行为

1. //e.stopPropagation();是阻止冒泡的函数 //e.preeventDefault()是阻止表单的默认行为

Myth丶恋晨/ 2022年06月02日 04:46/ 0 赞/ 153 阅读

相关 jQuery阻止冒泡事件和默认事件

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行

左手的ㄟ右手/ 2022年06月02日 00:09/ 0 赞/ 299 阅读

相关 jQuery事件冒泡和默认行为

在jQuery的事件冒泡和默认行为中，需要掌握四样东西。希望下面的代码会对大家有所帮助。在控制台中一段一段的查看运行效果。 <!DOCTYPE html> <

Love The Way You Lie/ 2022年03月12日 11:18/ 0 赞/ 216 阅读

相关 JS阻止事件冒泡和默认行为

1、首先对事件冒泡和默认行为以及要用到的事件对象event有个认识对事件冒泡的理解是当触发一个子元素的事件时，同时它的父元素的事件也会依次被触发。即事件从最低层元素依

绝地灬酷狼/ 2022年01月23日 05:41/ 0 赞/ 379 阅读