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. 什么是JSONP以及它是怎么产生的

    什么是JSONP以及它是怎么产生的         1.什么是jsonp                 JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Scr ...

  2. JavaScript可否多线程? 深入理解JavaScript定时机制（转载）

    说明:最近写 js 时需要用setinterval函数做定时操作,谁知道,刚开始后运行完好,但一段时间后他就抽风了,定时任务运行的时间间隔越来越短,频率加快,这是一个完全不能容忍的问题,带着一个可以出 ...

  3. ZOJ 3818 Pretty Poem

    暴力模拟 细节处理很重要... #include <iostream> #include <cstring> #include <cstdio> using nam ...

  4. [TYVJ] P1023 奶牛的锻炼

    奶牛的锻炼 背景 Background USACO   描述 Description 奶牛Bessie有N分钟时间跑步,每分钟她可以跑步或者休息.若她在第i分钟跑步,可以跑出D_i米,同时疲倦程度增加 ...

  5. 163k地方门户网站系统团购定时结束限量控制

    #coding=utf8 #!/usr/bin/env python # 网站自动审核系统 import pymssql import re import sys import datetime im ...

  6. VC2010的破解方法(针对旗舰版)

    VS2010 正式版破解方法详解 全球开发者最为瞩目的Visual Studio 2010开发工具在4月12日正式发布,现为大家制作一个简单的破解教程有两种方法,操作不一样,原都一样(针对旗舰版,其他 ...

  7. PowerShell官方的MSDN

    https://msdn.microsoft.com/en-us/powershell/mt173057.aspx 官方还咋github上放置了  扩展模块. 比如 web iis部署.sqlserv ...

  8. android批量文件上传（android批量图片上传）

    项目中多处用到文件批量上传功能,今天正好解决了此问题,在此写出来,以便日后借鉴. 首先,以下架构下的批量文件上传可能会失败或者不会成功:   1.android客户端+springMVC服务端:服务端 ...

  9. shell操作mysql

    参考: http://blog.csdn.net/hbcui1984/article/details/5125387

  10. 【剑指offer】面试题34：丑数

    题目: 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 思路: 第一 ...