方式一：event.stopPropagation();

方式二：return false;

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

例子： 当文本输入框获取焦点后，在div1的mousedown事件中采用 event.stopPropagation(); 代码，我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.12.3.min.js"></script>
<script>
    $(document).ready(function(){
        $("#div1").mousedown(function(event){
            //event.stopPropagation();
            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">
            <div id="div1" style="width:200px;height:200px;"><br><br>2.然后再单击这里</div>
        </div>
    </div>
</body>
</html>

jQuery中两种阻止事件冒泡的区别的更多相关文章

  1. Cesium 中两种添加 model 方法的区别

    概述 Cesium 中包含两种添加 model 的方法,分别为: 通过 viewer.entities.add() 函数添加 通过 viewer.scene.primitives.add() 函数添加 ...

  2. JQuery中阻止事件冒泡的两种方式及其区别

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

  3. JQuery 提供了两种方式来阻止事件冒泡。

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

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

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

  5. 阻止事件冒泡两种方式：event.stopPropagation();和return false;

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

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

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

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

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

  8. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

  9. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

随机推荐

  1. SQLLoader2(导入EXCEL或csv格式的文件)

    一.EXCEL文件导入:1.首先将EXCEL文件另存为CSV格式文件--->用UltraEdit工具打开时可看到字段之间以逗号分隔. ,EMPNO,ENAME,JOB,MGR,HIREDATE, ...

  2. HTML与CSS入门——第三章 理解HTML和XHTML的关系

    知识点: 1.以HTML创建一个简单网页的方法 2.包含每个网页必须有的所有HTML标签的方法 3.用段落和换行组织页面的方法 4.用标题组织内容的方法 5.HTML.XML.XHTML和HTML5之 ...

  3. C++实现二叉树的基本操作

    #include <iostream> #include <stack> #include <queue> using std::cin; using std::c ...

  4. SQL Server两种分页的存储过程介绍

          由于现在很多的企业招聘的笔试都会让来招聘的写一个分页的存储过程,有的企业甚至要求应聘者用两种方式实现分页,如果没有在实际项目中使用过分页,那么很多的应聘者都会出现一定的问题,下面介绍两种分 ...

  5. XML 解析中，如何排除控制字符

    XML 解析中,如何排除控制字符 今天在解析一个中文的 XML时,始终报错 PCDATA invalid Char value 21 in Entity ,查询了一下这个 21 的ascii 值,发现 ...

  6. BlockingQueue

    BlockingQueue的使用 http://www.cnblogs.com/liuling/p/2013-8-20-01.html BlockingQueue深入分析 http://blog.cs ...

  7. 哪几个数的阶乘末尾有n个零？

    题目:哪几个数的阶乘末尾有n个0?其中n是一个正整数,从键盘输入. int main( void ) /* name: zerotail.cpp */ { int num, n, c, m; cout ...

  8. [C++程序设计]用数组名作函数参数

    1. 用数组元素作函数实参 #include <iostream> using namespace std; int max_value(int x, int max) { return ...

  9. py2exe 生成带图标的单个文件实例

    随便拉了个学习时用的测试程序来做的实例,原程序如下: #Filename:for.py count=0 for i in range(1,100,2): count+=i else: print 't ...

  10. centos minimal 安装无法自定义分区

    安装了太多版本的linux,最后还是决定安装CentOS的minimal版本: 安装的时候发现,没办法自定义分区,经查确实在命令行界面下安装是没有自定义分区的. 但是不管怎么安装都是没有图形介面,最后 ...