JQuery事件冒泡和默认行为代码实例
程序员文章站
2022-06-25 12:39:34
事件的冒泡什么是事件的冒泡?就是事件从子元素向父元素传递的一个过程如何阻止事件的冒泡?方式一:在事件的回调函数中加上return false;方式二:在事件回调函数的形参列表中添加event,然后在回...
事件的冒泡
什么是事件的冒泡?
就是事件从子元素向父元素传递的一个过程
如何阻止事件的冒泡?
方式一:在事件的回调函数中加上return false;
方式二:在事件回调函数的形参列表中添加event,然后在回调函数中调用event.stoppropagation();.
事件的默认行为
什么是事件的默认行为?
就是像a标签那样,没有绑定事件,但只要点击了就会自动跳转的行为
像提交按钮一样,没有绑定事件,但是点击就会提交表单信息,自动跳转
如何阻止事件的默认行为?
方式一:在事件的回调函数中加上return false;
方式二:在事件回调函数的形参列表中添加event,然后在回调函数中调用event.stoppropagation();.
示例代码
html以及css代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>23-jquery事件的冒泡和默认行为</title> <style> *{ margin: 0; padding: 0; } .father{ width: 400px; height: 400px; background-color: brown; } .son{ width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <form action="http://www.baidu.com"> <input type="text"> <input type="submit" value="提交"> </form> </body> </html>
javascript代码(用到了jquery-1.11.3.js)
<script src="../js/jquery-1.11.3.js"></script> <script> $(function () { $(".father").click(function () { alert("father"); }); $(".son").click(function (event) { alert("son"); // return false; // 方式一 // 阻止子元素点击事件的冒泡 event.stoppropagation(); // 方式二 }); $("input[type=submit]").click(function (event) { // return false; // 方式一 // 取消提交按钮的默认行为 event.preventdefault(); }); }); </script>
运行效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: JQuery表单元素取值赋值方法总结
下一篇: angular组件间通讯的实现方法示例
推荐阅读
-
javascript阻止事件冒泡和浏览器的默认行为
-
Vue阻止事件冒泡和默认行为案例-弗诺缺德-SegmentFault思否
-
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
-
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
-
JavaScript停止事件冒泡和取消事件默认行为
-
js/jquery停止事件冒泡和阻止浏览器默认事件教程
-
javascript阻止事件冒泡和浏览器的默认行为
-
JQuery事件冒泡和默认行为代码实例
-
Vue阻止事件冒泡和默认行为案例-弗诺缺德-SegmentFault思否
-
js事件冒泡和捕获,阻止冒泡和默认行为