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

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. java之LinkedList详细介绍

    1 LinkedList介绍 LinkedList简介 LinkedList 是一个继承于AbstractSequentialList的双向链表.它也可以被当作堆栈.队列或双端队列进行操作.Linke ...

  2. 解决element-ui upload组件报错 Avoid using non-primitive value as key, use string/number value instead

    到底是啥错呢,就是要求你的key必须是string或者number类型 那么解决就是找到这个报错的key(在node_modules/element-ui/lib/element-ui.common. ...

  3. 【转载】MyBatis JdbcType 与Oracle、MySql数据类型对应关系详解

    [原文链接]:MyBatis JdbcType 与Oracle.MySql数据类型对应关系详解 1. Mybatis JdbcType与Oracle.MySql数据类型对应列表 2. Mybatis ...

  4. ORACLE更新数据时如果有就更新没有就插入

    SQL写法: begin update table_name set salary = 10000 where emp_id = 5; if sql%notfound then insert into ...

  5. [EXP]Microsoft Windows 10 - XmlDocument Insecure Sharing Privilege Escalation

    Windows: XmlDocument Insecure Sharing Elevation of Privilege Platform: Windows (almost certainly ear ...

  6. Xamarin.Android 获取手机IP地址

    命名空间: using System.Net; 代码: IPAddress[] address = Dns.GetHostAddresses(Dns.GetHostName()); ] != null ...

  7. Nginx+apache/Tomcat实现反向代理与动静分离

    其实本人比较喜欢nginx跑静态和做负载反向代理,动态php还是交给apache处理比较稳定,jsp就交给tomcat.resin或jboss.nginx跑静态的能力是无与伦比的,是目前web服务器里 ...

  8. 第七章：四大组件之Service

    Service是Android系统中的一种组件,它跟Activity的级别差不多,但是它不能自己运行,只能后台运行,并且可以和其他组件进行交互.Service是没有界面的长生命周期的代码.Servic ...

  9. Oracle 基本知识回顾

    1.查找数据库所用的字符集编码:SELECT USERENV('language') FROM DUAL;2.将一个表中的字段,插入到这个表:INSERT INTO TABLE SELECT * FR ...

  10. pythonic(fork)

    转载  https://wuzhiwei.net/be_pythonic/