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. Effective Java 电子书 apk版本下载

    下载安装包以后,安装即可阅读该书了,并且实时展示每章节代码哦,并且可以运行哦,赶快下载体验吧. Effective Java中文第二版下载地址:下载 应用截图:

  2. Java 执行终端命令实现，调用执行另外一个Java文件

    Test.java package com.journaldev.files; public class Test { public static void main(String[] args) { ...

  3. hibernate多对多映射文件详解（一）

    1.仓库表属性 public class WarehouseNew implements java.io.Serializable { // Fields private static final l ...

  4. js基础小总结之string&array&object

    一.数据类型之间的转换 string--->number :parseInt(string)/parseFloat(string); 注:在Date中,因为返回值date为单位为ms的字符串,将 ...

  5. 必须弄懂的495个C语言问题

    1.1 我如何决定使用那种整数类型? 如果需要大数 值(大于32, 767 或小于¡32, 767), 使用long 型.否则, 如果空间很重要(如有大数组或很多结构), 使用short 型.除此之外 ...

  6. Codeforces 494D Upgrading Array

    http://codeforces.com/contest/494/problem/D 题意:给一个数组,和一个坏质数集合,可以无数次地让1到i这些所有数字除以他们的gcd,然后要求Σf(a[i])的 ...

  7. HDU 2222 Keywords Search (AC自动机)

    题意:就是求目标串中出现了几个模式串. 思路:用int型的end数组记录出现,AC自动机即可. #include<iostream> #include<cstdio> #inc ...

  8. Qt String 与char* char int之间的转换

    下面CSDN的博客已经描述的很好了.不写了 references: http://blog.csdn.net/ei__nino/article/details/7297791 http://blog. ...

  9. 【转】Gedit中文乱码

    原文网址:http://wiki.ubuntu.org.cn/Gedit%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81#.E5.91.BD.E4.BB.A4.E6.96.B9 ...

  10. Gym 100570E : Palindrome Query

    De Prezer loves palindrome strings. A string s1s2...sn is palindrome if and only if it is equal to i ...