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 language="JavaScript" type="text/javascript" src="jquery-1.3.2.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. JQuery中阻止事件冒泡的两种方式及其区别

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

  2. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  3. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  4. 你知道JQuery中的事件冒泡吗,他是怎么执行的,如何来停止冒泡事件?

    事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...

  5. angularjs中阻止事件冒泡,以及指令的注意点

    appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...

  6. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  7. jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

  8. jquery 中的事件冒泡

    废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...

  9. 在jQuery中解决事件冒泡问题

    <pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端 解决方法:在事件处理函数中返回fal ...

随机推荐

  1. [转载]Linux编程 sockaddr_in 和sockaddr和in_addr详解

    sockaddr sockaddr 是通用的socket地址,具体到Internet socket,用下面的结构,二者可以进行类型转换 sa_family是地址家族,一般都是"AF_xxx& ...

  2. Unity编辑器-创建单独编辑框,折叠框,提示框

    今天我们就来学习如何创建一个编辑框,上面绘制一个折叠框里面有四种消息框. 代码如下: using UnityEngine; using System.Collections; using UnityE ...

  3. SQUEEZENET: ALEXNET-LEVEL ACCURACY WITH 50X FEWER PARAMETERS AND <0.5MB MODEL SIZE

    论文阅读笔记 转载请注明出处: http://www.cnblogs.com/sysuzyq/p/6186518.html By 少侠阿朱

  4. Biorhythms(中国剩余定理)

    Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 127339   Accepted: 40342 Des ...

  5. UVA247- Calling Circles(有向图的强连通分量)

    题目链接 题意: 给定一张有向图.找出全部强连通分量,并输出. 思路:有向图的强连通分量用Tarjan算法,然后用map映射,便于输出,注意输出格式. 代码: #include <iostrea ...

  6. 基础命名空间:序列化_自定义序列化 System.Runtime.Serialization

    (  (From Msdn) 自定义序列化是控制类型的序列化和反序列化的过程,通过控制序列化,可以确保序列化兼容性.换而言之,在不中断类型核心功能的情况下,可在类型的不同版本之间序列化和反序列化. 重 ...

  7. application windows are expected to have a root view controller错误

    产生这个提示的操作:在xcode4.6中创建一个名字为appTest空工程,create一个ios-application-empty application,直接编译运行 错误提示:虽然编译通过,也 ...

  8. 跨平台渲染框架尝试 - GPU Buffer的管理(1)

    buffer资源 下面来谈谈buffer的管理.buffer资源从广义上就是C语言的数组.如下图所示. 图 buffer的广义模型 在渲染管线中,无论是opengl还是dx或者其他的渲染api,都会提 ...

  9. shell中的退出状态码

    shell中的退出状态码最大只有255,如果超过这个值,就会进行取余运算,即如果执行如下命令: exit exitCode 如果exitCode大于255,那么实际的状态码为exitCode % 25 ...

  10. Hibernate之通过hibernate.cfg.xml配置文件访问数据库的例子

    hibernate.cfg.xml文件内容: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...