有时候遇到冒泡事件很烦人,真的.....

1.e.stopPropagation()阻止事件冒泡

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

</head>

<body>

    <table>

        <tr>

            <td><span>冒泡事件测试</span></td>

        </tr>

    </table>

</body>

我们先看这段代码：

   <script type="text/javascript">

        $(function () {

            $("table").click(function () { alert("table alert"); });

            $("td").click(function () { alert("td alert"); });

            $("span").click(function (){

                    alert("span alert");

            });

        });

    </script>

我们会看到这样的情况：span alert -> td alert -> table alert。这就叫事件冒泡。就是从下到上，从里到外，事件依次触发。

有的时候我们不希望事件冒泡咋办？

<script type="text/javascript">

        $(function () {

            $("table").click(function () { alert("table alert"); });

            $("td").click(function () { alert("td alert"); });

            $("span").click(function (e){

                    alert("span alert");

                    e.stopPropagation();

            });

        });

    </script>

如果想获得事件相关信息，就要给匿名方法加一个e对象，e就是事件对象。

2.e.preventDefault()阻止事件默认行为。

$("a").click(function (e) {

     alert("默认行为被禁止喽");

     e.preventDefault();

});

<a href="http://www.baidu.com">测试</a>

3.return false

　　return false 等效于同时调用e.preventDefault()和e.stopPropagation().

　　return false除了阻止默认行为之外，还会阻止事件冒泡。如果手上有一份jquery源代码的话，可查看其中有如下代码：

if (ret===false){

　　event.preventDefault();

　　event.stopPropagation();

}

jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)的更多相关文章

  1. jQuery中return false,e.preventDefault(),e.stopPropagation()的区别

    e.stopPropagation()阻止事件冒泡 <head> <title></title> <script src="Scripts/jQue ...

  2. jQuery中的 return false, e.preventDefault(), e.stopPropagation()的区别

    e.stopPropagation()阻止事件冒泡 <html><head>     <title></title>     <script sr ...

  3. js中return false; jquery中需要这样写：return false(); Jquery 中循环 each的用法 for循环

    js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 $(".progressName").each(f ...

  4. js中 return false

    一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果  二.返回控制, 无函数结果,语法为:return;  在大多数情况下,为事件 ...

  5. js中return false，return，return true的使用方法及区别

    起首return作为返回keyword,他有下面两种返回体式格式 1.返回把握与函数成果 语法为:return 表达式; 语句停止函数履行,返回调用函数,而且把表达式的值作为函数的成果 2.返回把握无 ...

  6. js中return false,return,return true的用法及区别

    首先return作为返回关键字,他有以下两种返回方式 1.返回控制与函数结果 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 2.返回控制无函数结果 语 ...

  7. js中return false，return，return true的用法及差别

    起首return作为返回关键字,他有以下两种返回体式格式 1.返回把握与函数成果 语法为:return 表达式; 语句停止函数履行,返回调用函数,并且把表达式的值作为函数的成果 2.返回把握无函数成果 ...

  8. 关于js中return false、event.preventDefault()和event.stopPropagation()

    在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此 ...

  9. js中return、return true、return false的区别

    一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果  二.返回控制, 无函数结果,语法为:return;  在大多数情况下,为事件 ...

随机推荐

  1. iOS架构模式浅析

    这是以前旧博客在13年规划写的一个系列,写了一部分内容,还没有完成.现在重新整理编写.计划从基础知识六大设计原则.设计模式中类的关系开始,然后会对iOS开发中的常用架构模式进行介绍,最后对GoF的23 ...

  2. B树之C语言实现（包含查找、删除、插入）

    B树的定义 一棵m阶B树(Balanced Tree of order m),或为空树,或为满足下列特性对的m叉树. 树中每个结点最多含有m棵子树. 若根结点不是叶子结点,则至少有2个子树. 除根结点 ...

  3. zabbix docker - 安装和初始化配置

    zabbix docker - 安装和初始化配置 安装zabbix server docker-mysql版本 zabbix server支持不同的数据库(详见zabbix的docker hub),这 ...

  4. Android开发 - ImageView加载Base64编码的图片

    在我们开发应用的过程中,并不是所有情况下都请求图片的URL或者加载本地图片,有时我们需要加载Base64编码的图片.这种情况出现在服务端需要动态生成的图片,比如: 二维码 图形验证码 ... 这些应用 ...

  5. Maven 的安装与配置

    最近公司需要新起一个项目,想使用maven+springmvc+spring+mybatis+mysql实现,以前我们的项目都是传统的老项目,没用过maven,Eclipse版本是GALILEO的,有 ...

  6. idea : shorten command line

    [官方文档]:IntelliJ IDEA 2017.3 EAP: Configurable command line shortener and more 如果类路径太长,或者有许多VM参数,程序就无 ...

  7. Linux快速目录间切换cd pushd popd

    1.   cd -     当前目录和之前所在的目录之间的切换 2.   cd + Alt . 用上次命令的最后一个目录路径 要用上上次命令的最后一个目录,就Alt+.两次就可以了 3.   push ...

  8. iptables防DDOS攻击和CC攻击设置

    防范DDOS攻击脚本 #防止SYN攻击 轻量级预防 iptables -N syn-flood iptables -A INPUT -p tcp --syn -j syn-flood iptables ...

  9. [Umbraco] umbraco中如何分页

    分页功能应该说是web开发中最基本的功能了,常规的做法是通过查询sql语句进行分页数据显示.但在umbraco中却不是这样子的.而且通过xpath中的postion来定位.如下代码 <?xml ...

  10. Ubuntu16.04安装Anaconda （转）

    一. Anaconda下载 Anaconda 官方下载链接: https://www.continuum.io/downloads 根据自己的系统选择下载32位还是64位.   二. 进入下载目录 如 ...