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. array模块

    array模块定义了一种序列数据结构,看起来和list很相似,但是所有成员必须是相同基本类型. 2.1 array-固定类型数据序列 array作用是高效管理固定类型数值数据的序列. 2.2.1 初始 ...

  2. Block 代替for循环

    NSDictionary *aDictionary = [[NSDictionary alloc]initWithObjectsAndKeys:", nil]; [aDictionary e ...

  3. hdu 2825 Wireless Password(ac自己主动机&amp;dp)

    Wireless Password Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  4. configure交叉编译

    今天在交叉编译时犯了一个错误,纠结了好久,曾经交叉编译器的前缀基本上都是用arm-linux-,这次换了一个新环境是arm-none-linux-gnueabi-,于是想当然的把configure中的 ...

  5. kaggle之识别谷歌街景图片中的字母

    https://github.com/lijingpeng/kaggle/tree/master/competitions/image_recognize 识别谷歌街景图片中的字母 street-vi ...

  6. CPU性能测试

    用计算圆周率的办法来测试cpu性能 4*a(1) 是 bc 主動提供的一個計算 pi 的函數,至於 scale 就是要 bc 計算幾個小數點下位數的意思.當 scale 的數值越大, 代表 pi 要被 ...

  7. 使用Spring JDBCTemplate简化JDBC的操作

    使用Spring JDBCTemplate简化JDBC的操作 接触过JAVA WEB开发的朋友肯定都知道Hibernate框架,虽然不否定它的强大之处,但个人对它一直无感,总感觉不够灵活,太过臃肿了. ...

  8. hdu1064Financial Management

    Problem Description Larry graduated this year and finally has a job. He’s making a lot of money, but ...

  9. Wordpress更换主题之后出错

    今天吃完午饭,休息休息,最近搞了一下google adsense,不过最终的审核没通过,我想会不会是界面不好看呢,饭后就在电脑旁,更换了几个wordpress主题,我的博客使用wordpress搭建的 ...

  10. JQuery easyui （2）Droppable（放置）组件

    所谓放置,就是将一个物体放入一个物体内,当然对于easyui来说触发各种效果是必不可少的,同时这个组件也不会依赖于其他组件. Droppable的加载方式 1,class  加载   一直不太喜欢cl ...