jQuery之防止冒泡事件 默认事件阻止
来源:互联网 发布:网络主播年收入 编辑:程序博客网 时间:2024/05/17 21:58
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
<body><div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素</div><div id="msg"></div></body>
<script type="text/javascript">$(function(){ // 为span元素绑定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息 $('#msg').html(txt);// 设置html信息 }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); });})</script>
当点击span时,会触发div与body 的点击事件。点击div时会触发body的点击事件。
如何防止这种冒泡事件发生呢?
<script type="text/javascript">$(function(){ // 为span元素绑定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为div元素绑定click事件 $('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); });})</script>
stopPropagation: function (e) { e = e || window.event; if (e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 } }
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
<script type="text/javascript">$(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值,val() 方法返回或设置被选元素的值。 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 event.preventDefault(); //阻止默认行为 ( 表单提交 ) } })})</script>
还有一种防止默认行为的方法就是return false。效果一样。
<script type="text/javascript">$(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 return false; } })})</script>
同理,上面的冒泡事件也可以通过return false来处理。
<script type="text/javascript">$(function(){ // 为span元素绑定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); return false; }); // 为div元素绑定click事件 $('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); return false; }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); });})</script>
0 0
- jQuery之防止冒泡事件 默认事件阻止
- jQuery:防止冒泡事件,阻止默认事件介绍
- jQuery阻止冒泡和默认事件
- jQuery 阻止事件冒泡和默认行为
- JQuery:事件冒泡和阻止默认行为
- jQuery事件---阻止冒泡和默认行为
- Jquery中阻止默认冒泡事件
- 防止事件冒泡和阻止默认事件的兼容写法
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- javascript事件之:事件冒泡, 事件捕获 ,默认事件阻止
- 阻止事件冒泡 默认事件
- jQuery之防止冒泡事件
- jQuery之防止冒泡事件
- jQuery之防止冒泡事件
- jQuery之防止冒泡事件
- jQuery之防止冒泡事件
- jQuery之防止冒泡事件
- JVM的内存模型
- nodejs npm常用命令
- Android开发笔记(一百零一)滑出式菜单
- ADAPTER(适配器模式)
- Retrofit使用
- jQuery之防止冒泡事件 默认事件阻止
- 1022 of dp
- 【Bugly干货分享】手把手教你逆向分析 Android 程序
- 爬虫技术浅析
- CAP和BASE理论
- C++第8周项目 数组和指针 【项目2-用对象数组操作长方柱类】(复习新版)
- mysql的启动
- on事件绑定未来元素
- 细说PHP中strlen和mb_strlen的区别