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. C语言中关于字符串的一些常用函数

    使用以下时应当在头文件中加入string.h getch()为当你键入任何一个值时,返回但是并不显示,立马编译结束,返回的是asc码  getchar():当你键入回车之后才算是输入结束,并且可以用p ...

  2. javascript中遍历EL表达式List集合中的值

    http://www.cnblogs.com/limeiky/p/6002900.html

  3. 感知机（perceptron）

    二类分类的线性分类模型,属于判别模型,利用梯度下降法对损失函数进行极小化求得感知机模型分为原始形式和对偶形式,是神经网络和支持向量机的基础 由输入控件到输出控件的如下函数: f(x)=sign(W.X ...

  4. POJ 3709 K-Anonymous Sequence (单调队列优化)

    题意:给定一个不下降数列,一个K,将数列分成若干段,每段的数字个数不小于K,每段的代价是这段内每个数字减去这段中最小数字之和.求一种分法使得总代价最小? 思路:F[i]表示到i的最小代价.f[i]=m ...

  5. AOI

    AOI(Automatic Optic Inspection)的全称是自动光学检测,是基于光学原理来对焊接生产中遇到的常见缺陷进行检测的设备.AOI是新兴起的一种新型测试技术,但发展迅速,很多厂家都推 ...

  6. 《Java程序员面试笔试宝典》之Java程序初始化的顺序是怎样的

    在Java语言中,当实例化对象时,对象所在类的所有成员变量首先要进行初始化,只有当所有类成员完成初始化后,才会调用对象所在类的构造函数创建对象. Java程序的初始化一般遵循以下三个原则(以下三原则优 ...

  7. LitJson处理Json

    LitJSON是一个.NET平台下处理JSON格式数据的类库,小巧.快速.它的源代码使用C#编写,可以通过任何.Net平台上的语言进行调用,目前最新版本为LitJSON 0.9. 下载地址: http ...

  8. Scala-Partial Functions(偏函数)

    如果你想定义一个函数,而让它只接受和处理其参数定义域范围内的子集,对于这个参数范围外的参数则抛出异常,这样的函数就是偏函数(顾名思异就是这个函数只处理传入来的部分参数). 偏函数是个特质其的类型为Pa ...

  9. Android系统进程间通信Binder机制在应用程序框架层的Java接口源代码分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6642463 在前面几篇文章中,我们详细介绍了A ...

  10. ERROR 1130: Host is not allowed to connect to this MySQL server

    解决远程连接mysql错误1130代码的方法 今天在用远程连接Mysql服务器的数据库,不管怎么弄都是连接不到,错误代码是1130,ERROR 1130: Host 192.168.2.159 is ...