jQuery中两种阻止事件冒泡的区别
方式一:event.stopPropagation();
方式二:return false;
但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。
例子: 当文本输入框获取焦点后,在div1的mousedown事件中采用 event.stopPropagation(); 代码,我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时,鼠标单击红色区域光标仍然停留在文本输入框内。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.12.3.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").mousedown(function(event){
//event.stopPropagation();
return false;
});
$("#div2").mousedown(function(event){
alert("trigger mousedown event of rootDiv");
});
});
</script>
</head>
<body>
<div id="rootDiv" style="position:relative;left:400px;top:200px;">
<div>1.单击输入框,使输入框获取焦点:</div>
<input id="input1" style="width:250px;" type="text"></input>
<div id="div2">
<div id="div1" style="width:200px;height:200px;"><br><br>2.然后再单击这里</div>
</div>
</div>
</body>
</html>
jQuery中两种阻止事件冒泡的区别的更多相关文章
- Cesium 中两种添加 model 方法的区别
概述 Cesium 中包含两种添加 model 的方法,分别为: 通过 viewer.entities.add() 函数添加 通过 viewer.scene.primitives.add() 函数添加 ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JQuery 提供了两种方式来阻止事件冒泡。
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
- 阻止事件冒泡两种方式:event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
- js阻止事件冒泡的两种方法
1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
- jquery阻止事件冒泡的3种方式
第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...
- JQuery阻止事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
随机推荐
- [HeadFrist-HTMLCSS学习笔记][认识HTML中的“HT”]
学习超链接 超链接 使用\元素创建一个超文本链接,链接到另一个Web 页面. \元素的内容会变成为Web页面中可单击的文本.href属性告诉浏览器链接的目标文件 <a href="el ...
- 触摸点为scrollview上的子控件时,scrollview不能滚动(iOS8)
现象:在iOS8上,scrollview上面布局了多行多列的button,滑动scrollview,如果当触摸点是在按钮上,scrollview不能滚动. 例如: 解决方法:设置scrollview的 ...
- PowerDesigner中在生成的数据库脚本中用name列替换comment列作为字段描述的方法
1 PowerDesigner中在生成的数据库脚本中用name列替换comment列作为字段描述的方法如下, 依次打开Tools -- Execute Commands -- Run Script,运 ...
- What's New in C# 6.0(转)
原文地址:http://www.codeproject.com/Tips/1023426/Whats-New-in-Csharp 本来想翻译一下贴出来,但是好像很多语言组织起来比较困难,读书少不会表达 ...
- ubuntu studio
相对于普通的的Ubuntu Linux而言,Ubuntu Studio更适合于多媒体设计人员,也就是说Ubuntu Studio更适合经常搞图片和电脑音乐的Linux爱好者们. Ubuntu Stud ...
- sqlserver系统表操作
查询表名中包含‘user’的方法Select * From sysobjects Where name like '%user%' 如果知道列名,想查找包含有该列的表名,可加上系统表syscolumn ...
- Xcopy参数介绍
DOS批处理命令,永远是不朽的命令,不仅功能强大,同时,速度也是最快的!但是,很多新手学习计算机,都已经遗忘了本不该忘记的批处理命令. 我们不可数典忘祖,该学习的还是要学习,不该忘记的还是不能忘记,尤 ...
- eclipse的优化 gc.log
原帖:http://www.javaeye.com/topic/756538 性能优化从身边做起. 首先建立评估体系,将workspace里所有的项目close掉,关闭eclipse.优化的用例就是启 ...
- 动态创建和移除HTML标签
1.w3school定义 添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插 ...
- c语言中内存对齐问题
在最近的项目中,我们涉及到了“内存对齐”技术.对于大部分程序员来说,“内存对齐”对他们来说都应该是“透明的”.“内存对齐”应该是编译器的“管辖范围”.编译器为程序中的每个“数据单元”安排在适当的位置上 ...