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. if条件语句练习（相亲）

    public class a { public static void main(String[] arg){ //F是房子,Q是钱,N是能力,等于0说明没有,等于1说明有: 有一项具备则可以嫁,都不 ...

  2. web前端之 CSS引入第三方插件

    引入第三方图标插件 - fontawesome 官网地址:http://fontawesome.io/ 1.下载图标插件包 下载地址:https://codeload.github.com/FortA ...

  3. c++之 变量

    变量的基本操作 变量就是一个可以变化的量,变量由变量类型.变量名.初始值(可选)组成,例如: int abc = 10; 变量类型:int 变量名:abc 初始值:10 // 该值为可选项,在创建变量 ...

  4. Android学习笔记--远程服务的使用

    1.AIDL和Binder Android系统四大组件Activity, Content Provider, Broadcast和Service均可以进行跨进程数据传输. Activity可以隐式调用 ...

  5. （转载）js获取JqueryString方法小结

    一．<script>urlinfo=window.location.href; //获取当前页面的urllen=urlinfo.length;//获取url的长度offset=urlinf ...

  6. UNION 和UNION ALL

    UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SELECT 语句中的列 ...

  7. Mybatis Generator最完整配置详解

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...

  8. 嵌入式Linux LED小灯点亮实验

    问:怎么写LED驱动程序? 1.搭建一个字符驱动的框架(上一节已经完成) 2.完善硬件的操作 问:驱动里操作硬件寄存器与单片机操作硬件寄存器有什么不一样的地方? 答:单片机操作的寄存器地址是物理地址, ...

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

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

  10. （原）caffe中通过图像生成lmdb格式的数据

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5909121.html 参考网址: http://www.cnblogs.com/wangxiaocvp ...