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;
}
})
})

最新文章

  1. hdu4833 Best Financing(DP)
  2. malware analysis、Sandbox Principles、Design &amp;&amp; Implementation
  3. JAVA正则表达式:Pattern类与Matcher类详解
  4. Dynamics AX 2012 R2 耗尽用户
  5. C++学习之:括号匹配与栈的使用
  6. 【php常用】常用函数啥的
  7. jqeury之轮播图
  8. ASP.NET中使用开源插件zTree的小结
  9. ZOJ 2411 Link Link Look(BFS)
  10. DataGrid( 数据表格) 组件[6]
  11. 为什么我的子线程更新了 UI 没报错?借此,纠正一些Android 程序员的一个知识误区
  12. Linux下MongoDB安装和配置详解
  13. 以C语言为例的程序性能优化 --《深入理解计算机系统》第五章读书笔记
  14. Vulkan API基本概念
  15. String内存分配
  16. 2019南昌邀请赛 L 计算几何 G(待补)
  17. Python内建函数-callable
  18. Python快速入门
  19. docker swarm 搭建及跨主机网络互连案例分析
  20. @ModelAttribute注解(SpringMVC)

热门文章

  1. Git分支,合并,切换分支的使用
  2. BlueStore-先进的用户态文件系统《一》
  3. POJ 1273 Drainage Ditches (网络流Dinic模板)
  4. 使用JAVA如何对图片进行格式检查以及安全检查处理
  5. JavaScript 六种继承方式
  6. python 标准模块和第三方模块
  7. 78、tensorflow滑动平均模型,用来更新迭代的衰减系数
  8. java 子类对象实例化的过程
  9. CentOS安装 netdata 实时监视 Linux 系统性能
  10. pandas 使用出现的问题汇总