JQuery中阻止事件冒泡方式及其区别
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 language="JavaScript" type="text/javascript" src="jquery-1.3.2.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中阻止事件冒泡方式及其区别的更多相关文章
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- React 中阻止事件冒泡的问题
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...
- 你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？
事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...
- angularjs中阻止事件冒泡，以及指令的注意点
appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...
- jQuery 中的事件冒泡和阻止默认行为
1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...
- jQuery中的事件冒泡
1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
- jquery 中的事件冒泡
废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...
- 在jQuery中解决事件冒泡问题
<pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端 解决方法:在事件处理函数中返回fal ...
随机推荐
- 【转】ffserver用法小结
我们可以通过ffserver以及ffmpeg做一个简单的视频监控系统,ffserver用于视频的转发调度,ffmpeg用于转码 而对于ffserver最基本也是最重要的就是对它的ffserver.co ...
- 归纳下js面向对象的几种常见写法
//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); ob ...
- apache访问控制设置
apache访问控制设置 (2009-03-17 11:24:36) 转载▼ 标签: it 杂谈 Order allow,deny 默认情况下禁止所有客户机访问 Order deny,all ...
- java.util.concurrent.ExecutionException
java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start com ...
- mybatis参数查询
单个参数查询 在mapper.xml配置文件中配置 <select id= "selectByNu" paramet ...
- 关于asp:login控件和验证码的问题？（转）
1.验证码页面添加.2.将这验证码页面添加到login控件中:拖曳一Login控件,将之切换到模式下,在Html源文件中在表格中密码那行后添加: <tr> <td style= ...
- //NSUserDeafult 图片的保存与读取
//NSUserDeafult保存图片数据到本地 -(void)saveImage:(UIImage *)image{ NSData* data=[NSKeyedArchiver archivedDa ...
- String()与toString()区别和应用
首先,String()和toString()方法都是将其它类型的变量转换为字符串的方法.但两者存在一定的区别: x.toString(): 无法转换null和undefined: 来看下面的小例子: ...
- Django 实战 之 搭项目（正在更新）
系统:win10 python版本:python 3.5 工具: pyCharm 3.4 professional 源码来源:https://github.com/ouzhigang/django-o ...
- jQuery模板插件jsrender
前几天学习jqm+phonegap,用到了一个jquery插件jsrender,(由于app不能用asp.net的服务端控件了,所以我也是醉了...),用于循环展示一下数据. 下面是我用到的几个简单用 ...