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中阻止事件冒泡的两种方式及其区别的更多相关文章

  1. JQuery中阻止事件冒泡方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation();         $("#div1").mousedown(function( ...

  2. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  3. jquery阻止事件冒泡的3种方式

    第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...

  4. jQuery中的事件绑定的几种方式

    jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...

  5. c++构造函数成员初始化中赋值和初始化列表两种方式的区别

    先总结下: 由于类成员初始化总在构造函数执行之前 1)从必要性: a. 成员是类或结构,且构造函数带参数:成员初始化时无法调用缺省(无参)构造函数 b. 成员是常量或引用:成员无法赋值,只能被初始化 ...

  6. Html 中阻止事件冒泡的三种方法比较

    A:return false --->In event handler ,prevents default behavior and event bubbing .         return ...

  7. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...

  8. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  9. strus2中获取表单数据 两种方式 属性驱动 和模型驱动

    strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值 * 如果一个属性在对象栈,在页面 ...

随机推荐

  1. [Mugeda HTML5技术教程之15]案例分析：制作移动教育课件

    本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法.Mugeda为移动教育领域和移动数字出版领域提供理想的教 ...

  2. 分享到QQ空间、新浪微博、腾讯微博的代码！

    给网页加上分享代码,借助网友的力量推广网站,目前已经很流行了 以下是网页代码 QQ空间分享代码如下: <a href="javascript:void(0);" onclic ...

  3. Hdu1096

    #include <stdio.h> int main() { int T,n; ; while(scanf("%d",&T)!=EOF){ while(sca ...

  4. 《Programming WPF》翻译 第7章 7.我们进行到哪里了？

    原文:<Programming WPF>翻译 第7章 7.我们进行到哪里了? WPF提供了一个范围的高质量生成和合成服务.一组形状元素支持各种的绘图基础.一些笔刷类型是可利用的,对于决定如 ...

  5. java.lang.OutOfMemoryError: GC overhead limit exceeded 问题分析和解决(转)

    在项目历史数据导入过程中,出现了应用无法访问的情况.立刻对Weblogic进行分析,发现Weblogic的内存.线程等性能良好,Server也是Running的状态.随后查看了Weblogic日志,在 ...

  6. Buffer lock

    buffer lock    Oracle 提供非常精确,有效的Row Level Lock机制,多个用户同时修改数据时,为了保护数据. 以块为单位挂起锁的情况不会发生,但这不太正确. 以块为单位的锁 ...

  7. MBI 跨国网络传销 金字塔诈骗 解密

    马来西亚  反传销博客地址http://combatingillegalpyramidscheme.blogspot.jp/search/label/Mface 需要FQ访问  闽渝警方协作抓获一名公 ...

  8. poj 3684 Physics Experiment（数学，物理）

    Description Simon ), the first ball is released and falls down due to the gravity. After that, the b ...

  9. java实现点名，并记录被点次数

    java实现点名,并记录被点次数 import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStrea ...

  10. nopCommerce架构分析系列（二）数据Cache

    原文(http://www.cnblogs.com/gusixing/archive/2012/04/12/2443799.html)非常感谢作者顾思行的分享! 序言 在很多访问量较大的系统中,尤其在 ...