方式一：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. [HeadFrist-HTMLCSS学习笔记][认识HTML中的“HT”]

    学习超链接 超链接 使用\元素创建一个超文本链接,链接到另一个Web 页面. \元素的内容会变成为Web页面中可单击的文本.href属性告诉浏览器链接的目标文件 <a href="el ...

  2. 触摸点为scrollview上的子控件时，scrollview不能滚动（iOS8）

    现象:在iOS8上,scrollview上面布局了多行多列的button,滑动scrollview,如果当触摸点是在按钮上,scrollview不能滚动. 例如: 解决方法:设置scrollview的 ...

  3. PowerDesigner中在生成的数据库脚本中用name列替换comment列作为字段描述的方法

    1 PowerDesigner中在生成的数据库脚本中用name列替换comment列作为字段描述的方法如下, 依次打开Tools -- Execute Commands -- Run Script,运 ...

  4. What's New in C# 6.0(转)

    原文地址:http://www.codeproject.com/Tips/1023426/Whats-New-in-Csharp 本来想翻译一下贴出来,但是好像很多语言组织起来比较困难,读书少不会表达 ...

  5. ubuntu studio

    相对于普通的的Ubuntu Linux而言,Ubuntu Studio更适合于多媒体设计人员,也就是说Ubuntu Studio更适合经常搞图片和电脑音乐的Linux爱好者们. Ubuntu Stud ...

  6. sqlserver系统表操作

    查询表名中包含‘user’的方法Select * From sysobjects Where name like '%user%' 如果知道列名,想查找包含有该列的表名,可加上系统表syscolumn ...

  7. Xcopy参数介绍

    DOS批处理命令,永远是不朽的命令,不仅功能强大,同时,速度也是最快的!但是,很多新手学习计算机,都已经遗忘了本不该忘记的批处理命令. 我们不可数典忘祖,该学习的还是要学习,不该忘记的还是不能忘记,尤 ...

  8. eclipse的优化 gc.log

    原帖:http://www.javaeye.com/topic/756538 性能优化从身边做起. 首先建立评估体系,将workspace里所有的项目close掉,关闭eclipse.优化的用例就是启 ...

  9. 动态创建和移除HTML标签

    1.w3school定义 添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插 ...

  10. c语言中内存对齐问题

    在最近的项目中,我们涉及到了“内存对齐”技术.对于大部分程序员来说,“内存对齐”对他们来说都应该是“透明的”.“内存对齐”应该是编译器的“管辖范围”.编译器为程序中的每个“数据单元”安排在适当的位置上 ...