方式一：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. "a newer version of unity web player is required but the auto-update failed"

    问题背景描述: 项目采用winform调用unity web player作为播放器在客户端使用. 在有些环境会出现标题所示错误. 经过一翻研究后发现是插件在向服务器请求更新以下文件时报http 30 ...

  2. 【js】判断设备类型，访问相应的网站

    引入 function uaredirect(f) { try { if (document.getElementById("bdmark") != null) { return ...

  3. 转： 向tabControl中添加一个Form（C#）

  4. OpenCV——CvSeq动态结构序列

    动态结构序列CvSeq是所有OpenCV动态数据结构的基础. 分为两类: 稠密序列 稀疏序列 (1) 稠密序列都派生自CvSeq,他们用来代表可扩展的一维数组 - 向量.栈.队列和双端队列.数据间不存 ...

  5. C++程序设计实践指导1.10二维数组元素换位改写要求实现

    改写要求1:改写为以单链表和双向链表存储二维数组 改写要求2:添加函数SingleLinkProcess()实现互换单链表中最大结点和头结点位置,最小结点和尾结点位置 改写要求3:添加函数Double ...

  6. YUI Array 之hash

    hash就是把两个参数合并成一个类似hashMap结构的对象,用第一个数组的元素为key,第二个的为value,如果第二个参数未指定,则把对象的对应的值置为true YUI原码 YUI hashYAr ...

  7. 关于mysql中数据存储复合树形结构，查询时结果按树形结构输出

    1.主要思想:根据已有数据,规则性的造数据 select * FROM(select lId,strName,lId as lParentId,-1 as orderIdx from tbClassi ...

  8. WordPress主题制作全过程

    前言: 我想大多数使用WordPress的朋友都喜欢去尝试新的主题,但是换来换去,总是找不到那么一款适合自己的,让人很郁闷.于是很多人萌生了修改现有主题或自己动手从头制作一个主题的想法,但是问题又来了 ...

  9. werkzeug源码阅读笔记(二) 上

    因为第一部分是关于初始化的部分的,我就没有发布出来~ wsgi.py----第一部分 在分析这个模块之前, 需要了解一下WSGI, 大致了解了之后再继续~ get_current_url()函数 很明 ...

  10. 手机天猫nba项目总结

    页面逻辑: 技术统计 比赛竞猜 猜你喜欢 进入页面时,获取服务器的当前时间.然后进行页面上的每秒递增.1.每隔n秒向后台发送请求,获取最新比分信息,球队图像,球员信息.然后更改页面.2.每隔n秒向后台 ...