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. http_load压力测试

    http_load是基于linux平台的性能测试工具,它体积非常小,仅100KB.它以并行复用的方式运行,可以测试web服务器的吞吐量与负载. 一.安装http_load A.进入/usr/local ...

  2. 更改AngularJS的语法解析符号

    // 更改AngularJS的语法解析符号 app.config(function ($interpolateProvider) { $interpolateProvider.startSymbol( ...

  3. js判断输入的是单字节还是双字节

    计算机上每一个字符.数字.汉字.字母等,都对应着unicode编码,unicode编码小于255的为单字节,大于255.小于65535的为双子节或三字节 查看一个字符对应的unicode编码 var ...

  4. PowerShell常用的属性

    get-location | get-member  -membertype  property -------获取对象的属性---------- 获取对象特定的成员, 湖区.Net Framwork ...

  5. Navicat_Preminum

    一. 安装 参考http://blog.csdn.net/longyuhome/article/details/79206041. 软件准备• [OYKSOFT.COM]navicat11.0.8_p ...

  6. wapPush

    短信推送:wapPsuh简介

  7. geoip 添加一列,add_field =>["[geoip][request_time]","%{request_time}"]

    "message" => " 10.171.246.184 [11/Sep/2016:14:42:53 +0800] \"GET /wechat/home ...

  8. linux操作系下RAR的使用

    ============zip文件的操作================================== zip -r data.zip data 解释:将data文件夹压缩成了data.zip格 ...

  9. Asp.net MVC 3 防止 Cross-Site Request Forgery (CSRF)原理及扩展 安全 注入

    原理:http://blog.csdn.net/cpytiger/article/details/8781457 原文地址:http://www.cnblogs.com/wintersun/archi ...

  10. hdu 1011 Starship Troopers_树状dp

    题目链接 题意:给你一棵树(必须从根节点出发),每个节点上都有bug和value,你有m个骑士,每个骑士能消灭20个bug,你必须消灭该节点的全部bug才能拿到该节点的value,问最多能拿到valu ...