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; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" /> <title>冒泡例子</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").mousedown(function(event){
//event.stopPropagation();//仅仅阻止事件向上传播；
$(this).css('background','blue');
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" style="width:300px;height:300px;background-color:yellow;">
<div id="div1" style="width:200px;height:200px;background-color:red;">2.然后再单击这里</div>
</div>
</div>
</body>
</html>
JQuery中阻止事件冒泡的两种方式及其区别的更多相关文章
-
JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
-
js阻止事件冒泡的两种方法
1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
-
jquery阻止事件冒泡的3种方式
第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...
-
jQuery中的事件绑定的几种方式
jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...
-
c++构造函数成员初始化中赋值和初始化列表两种方式的区别
先总结下: 由于类成员初始化总在构造函数执行之前 1)从必要性: a. 成员是类或结构,且构造函数带参数:成员初始化时无法调用缺省(无参)构造函数 b. 成员是常量或引用:成员无法赋值,只能被初始化 ...
-
Html 中阻止事件冒泡的三种方法比较
A:return false --->In event handler ,prevents default behavior and event bubbing . return ...
-
jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
-
Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
-
strus2中获取表单数据 两种方式 属性驱动 和模型驱动
strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值 * 如果一个属性在对象栈,在页面 ...
随机推荐
-
knockoutjs如何动态加载外部的file作为component中的template数据源
玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...
-
oracle根据某个字段去重实例
if not object_id('Tempdb..#T') is null drop table #T Go Create table #T([ID] int,[Name] nvarchar(1), ...
-
发布一个自用的ansi转utf8程序
前几天网上下载了一个国外的源码示例,布署到IIS上,查看网页中文显示乱码,各种不方便,你懂的. 用记事本打开文件,显示是ANSI格式,另存为UTF8格式,保存,再查看页面就正常显示中文了. 文件好多, ...
-
U盘安装Windows 7 + Ubuntu 14 双系统笔记
第一个系统是Windows 7系统,现在采用U盘安装 Ubuntu 14,实现双系统,主要会用到3个软件: 1.DiskGenius - 磁盘修复.分区.调整分区工具,点击下载: 用这个工具先腾出一个 ...
-
双模蓝牙CC2564调试笔记
1.CC256X Testing Guide 官方文档WIKI地址:http://processors.wiki.ti.com/index.php/CC256x_Testing_Guide#Devi ...
-
POJ 1503 Integer Inquiry 简单大数相加
Description One of the first users of BIT's new supercomputer was Chip Diller. He extended his explo ...
-
网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中
一. 事件:说白了就是调用函数的一种方式.它包括:事件源.事件数据.事件处理程序. JS事件 1.js事件通常和函数结合来使用,这样可以通过发生的事件来驱动函数的执行,从而引起html出现不同的效果. ...
-
node.js之用ajax获取数据和ejs获取数据
摘要:学了node之后有时候分不清前台和后台,今天用ajax和ejs来从后台获取数据,没有数据库,用json数据来进行模拟数据库:来区分前台和后台需要干什么? 一.用ejs获取数据 1.文件目录 2. ...
-
Xamarin.Forms 开发资源集合
收集整理了下 Xamarin.Forms 的学习参考资料,分享给大家,稍后会不断补充: UI样式 Snppts: Xamarin Forms UI Snippets. Prebuilt Templat ...
-
串行动画组QSequentialAnimationGroup
按顺序执行动画 该类就是用来按照动画添加顺序来执行动画的.我们只用实例化该类,然后通过调用addAnimation()或者insertAnimation()方法把各个动画添加进去就可以了 import ...