jQuery冒泡事件阻止
2016-04-15 10:42
603 查看
JQuery 提供了两种方式来阻止事件冒泡。 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; $("#div1").mousedown(function(event){ return false; });
但是这两种方式是有区别
return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。
event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。
场景应用: Google 和 百度的联想框,当弹出下拉列表,用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。
示例测试代码: 当文本输入框获取焦点后,在div1的mousedown事件中采用 event.stopPropagation(); 代码,我们鼠标单击红色区域后文本输入框光标失去。
而当我们使用 return false; 代码时,鼠标单击红色区域光标仍然停留在文本输入框内。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。 event.stopPropagation(); // 阻止事件冒泡
当点击span时,会触发div与body 的点击事件。点击div时会触发body的点击事件。
如何防止这种冒泡事件发生呢?如下:
$(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); }); }) 上面的冒泡事件也可以通过return false来处理。
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。 这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。 $(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值,val() 方法返回或设置被选元素的值。 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 event.preventDefault(); //阻止默认行为 ( 表单提交 ) <form action="test.do" method="post" id="sub"></form>
} }) })
另一种防止默认行为的方法就是return false 效果一样。 $(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 return false; } }) })
相关文章推荐
- jQuery ztree 下载
- jquery.table.rowspan.js 表格自动合并单元格插件
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
- jquery操作数组
- jQuery中.bind() .live() .delegate() .on()的区别
- jQuery基于json与cookie实现购物车的方法
- 【jQuery】OnSubmit中的Ajax判断
- JQuery之操作iframe
- jQuery设置Cookie及删除Cookie实例分析
- jQuery学习笔记———jQuery中的事件和动画
- 基于Jquery全国省市区三级联动(含全国省市区数据)
- JQuery中阻止事件冒泡方式及其区别
- JQuery中阻止事件冒泡方式及其区别
- jQuery获取cookie值及删除cookie用法实例
- JQuery类型转换
- jQuery操作select的实例代码
- jQuery通过写入cookie实现更换网页背景的方法
- jQuery基础
- jquery.cookie.js实现用户登录保存密码功能的方法
- JQuery选择器整理