方式一：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. AE分级渲染

    分级渲染classbreakrenderer位于carto类库中,进行分级渲染时,首先要将相应图层按照某一Field分级.可使用esrisystem类库中的iclassifyGEN类的classify ...

  2. CDZSC_2015寒假新人（1）——基础 h

    Description Ignatius was born in a leap year, so he want to know when he could hold his birthday par ...

  3. YUI Array 之some(检测|any)

    YUI原码 YUI someYArray.some = Lang._isNative(Native.some) ? function (array, fn, thisObj) { return Nat ...

  4. 用IBM WebSphere DataStage进行数据整合: 第 1 部分

    转自:http://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0602zhoudp/ 引言 传统的数据整合方式需要大量的手工 ...

  5. C# 导出Excel Aspose.Cells

    public void ExportExcel() { Workbook workbook = new Workbook(); //工作簿 workbook.Worksheets.Clear(); w ...

  6. 使用JavaScript判断图片是否加载完成的三种实现方式

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> ...

  7. 如何使用Assetic进行文件管理

    安装和配置Assetic 从symfony2.8开始,Assetic就不再被包括在symfony标准版.使用任何Assetic的特性之前需要安装AsseticBundel,在命令行执行下面命令: $ ...

  8. php 查看文档

    http://www.runoob.com/php/php-datatypes.html php 学习网站 : http://www.phpfans.net/

  9. shell脚本练习(短路练习)

    #!/bin/bash #By Spinestars#2013-11-11#This is a lvsnap of auto-create Help(){ echo "Usage: ---d ...

  10. The number of divisors(约数) about Humble Numbers

    The number of divisors(约数) about Humble Numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Lim ...