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 ...
随机推荐
- array模块
array模块定义了一种序列数据结构,看起来和list很相似,但是所有成员必须是相同基本类型. 2.1 array-固定类型数据序列 array作用是高效管理固定类型数值数据的序列. 2.2.1 初始 ...
- Block 代替for循环
NSDictionary *aDictionary = [[NSDictionary alloc]initWithObjectsAndKeys:", nil]; [aDictionary e ...
- hdu 2825 Wireless Password(ac自己主动机&dp)
Wireless Password Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- configure交叉编译
今天在交叉编译时犯了一个错误,纠结了好久,曾经交叉编译器的前缀基本上都是用arm-linux-,这次换了一个新环境是arm-none-linux-gnueabi-,于是想当然的把configure中的 ...
- kaggle之识别谷歌街景图片中的字母
https://github.com/lijingpeng/kaggle/tree/master/competitions/image_recognize 识别谷歌街景图片中的字母 street-vi ...
- CPU性能测试
用计算圆周率的办法来测试cpu性能 4*a(1) 是 bc 主動提供的一個計算 pi 的函數,至於 scale 就是要 bc 計算幾個小數點下位數的意思.當 scale 的數值越大, 代表 pi 要被 ...
- 使用Spring JDBCTemplate简化JDBC的操作
使用Spring JDBCTemplate简化JDBC的操作 接触过JAVA WEB开发的朋友肯定都知道Hibernate框架,虽然不否定它的强大之处,但个人对它一直无感,总感觉不够灵活,太过臃肿了. ...
- hdu1064Financial Management
Problem Description Larry graduated this year and finally has a job. He’s making a lot of money, but ...
- Wordpress更换主题之后出错
今天吃完午饭,休息休息,最近搞了一下google adsense,不过最终的审核没通过,我想会不会是界面不好看呢,饭后就在电脑旁,更换了几个wordpress主题,我的博客使用wordpress搭建的 ...
- JQuery easyui (2)Droppable(放置)组件
所谓放置,就是将一个物体放入一个物体内,当然对于easyui来说触发各种效果是必不可少的,同时这个组件也不会依赖于其他组件. Droppable的加载方式 1,class 加载 一直不太喜欢cl ...