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. UITextView 输入长度限制

    //还可以输入的长度. - (void)textViewDidChange:(UITextView *)textView { UITextRange *markRange = textView.mar ...

  3. Android应用程序资源的查找过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8806798 我们知道,在Android系统中, ...

  4. 利用Unicorn和Idaemu辅助解决Geekpwn SecretCode

    在前面的些文章里,我提到了怎么交叉编译Unicorn-engine,以及在windows上使用Unicorn python bindings进行分析程序.这一次我介绍下如何使用Unicorn-engi ...

  5. HTTP协议2之基本认证--转

    http协议是无状态的, 浏览器和web服务器之间可以通过cookie来身份识别. 桌面应用程序(比如新浪桌面客户端)跟Web服务器之间是如何身份识别呢? 什么是HTTP基本认证 桌面应用程序也通过H ...

  6. 一些基础的.net用法

    一.using 用法 using 别名设置 using 别名 = System.web 当两个不同的namespace里有同名的class时.可以用 using aclass = namespace1 ...

  7. json返回数据拼接HTML

    <div class="box-lists">  </div> $.ajax({ url: 'AjaxPage/AjaxHandler.ashx', typ ...

  8. zeromq源码分析笔记之准备（0）

    zeromq这个库主要用于进程通信,包括本地进程.网络通信,涉及到一些基础知识,主要包括管道通信,socket编程的内容,反应器模式(使用IO多路复用实现),无锁队列这几块比较重要的部分,下面的几个链 ...

  9. Virtual Environments

    virtualenv 再另一篇随笔中已经提到过virtualenv.如果我们有好几个不同的项目,他们需要的第三方包版本不同,那怎么办呢.这时候就需要virtualenv创建一个虚拟环境,里面包含了一个 ...

  10. redis学习研究--基础知识

    以下内容多为摘抄转载: 1. Redis 是什么 Redis是一个开源的使用ANSI C语言编写的基于内存的key/value存储系统,与memcache类似,但它支持的value类型更多,包括:字符 ...