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 ...
随机推荐
- Unity 脚本函数生命周期
Awake(),一般我们在这里做一些组件的获得,比如使用getcomponent方法. Start(),我们可以在这里给变量赋值. FixUpdate(),固定更新,因为这里得更新速度为固定(可以在T ...
- python3-day1(基础总结)
总结比较抽象的难点: 1.二进制运算 60 & 13 =12 60 | 13 =61 60 ^ 13 =49 60<<2 =240 60>>2 =15 ...
- python高级编程之元类（第3部分结束）
# -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #元编程 #new-style类带来了一种能力,通过2个特殊方法(_ ...
- zabbix-check of pre-requisites
LAMP搭建完成后,访问http://ip/zabbix,在检查环境界面,有的检查项目提示fail.常见如下:zabbix:Check of pre-requisites1.PHP bcmath fa ...
- [跟我学spring学习笔记][DI循环依赖]
循环依赖 什么是循环依赖? 循环依赖就是循环引用,就是两个或多个Bean相互之间的持有对方. Spring容器循环依赖包括构造器循环依赖和setter循环依赖,那Spring容器如何解决循环依赖呢? ...
- ASP.NET开发学习视频教程大全（共800集）
ASP.NET是微软.NET平台的支柱之一,被广泛应用在WEB等互联网开发领域,因此它的强大性和适应性,可以使它运行在Web应用软件开发者的几乎全部的平台上.这里整理了最全的ASP.NET开发学习视频 ...
- IT定理：摩尔定理，安迪-比尔定理，反摩尔定理
前两天在网上不经意间搜到了一本吴军的<浪潮之巅>,讲的是现代国际上计算机界的各大公司的兴衰沉浮,包括AT&T公司与IBM等等,把它当作IT历史书看,到现在已经看了一部分了.其中,我 ...
- SQL Server 2008 geometry 数据类型
摘自SQL Server 2008帮助 平面空间数据类型 geometry 是作为 SQL Server 中的公共语言进行时 (CLR) 数据类型实现的.此类型表示欧几里得(平面)坐标系中的数据. 注 ...
- c++设计模式之状态模式
一. 状态模式 定义:允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类. 实现方式1: workstate 状态抽象类 workstate1 状态实现类1 workstate2 ...
- Ubuntu14.10下解决chromium浏览器无法安装adobe flash的问题
本文参考了一下资源和博客,在此提出表示感谢: http://my.oschina.net/u/209016/blog/290067 http://ubuntuhandbook.org/index.ph ...