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

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. AddTransient,AddScope和AddSingleton 有什么不同?

    我们先来创建几个接口using System; namespace DependencyInjectionSample.Interfaces{ public interface IOperation ...

  2. 启动elasticsearch报错

    could not find java; set JAVA_HOME or ensure java is in PATH 首先需要安装java 1.yum list installed |grep j ...

  3. Maven项目报错:Missing artifact****和ArtifactDescriptorException: Failed to read artifact descriptor for***和Cannot change version of project facet Dynamic web module to 2.5

    一.关于Cannot change version of project facet Dynamic web module to 2.5 具体查看博客:http://blog.csdn.net/ste ...

  4. centos7 部署YApi

    =============================================== 2018/6/5_第2次修改                       ccb_warlock 更新说 ...

  5. Tsql2008查询性能优化第一章---APPLY

       APPLY运算符涉及以下两个步骤中的一步或两步(取决于APPLY的类型):           1.A1把右表表达式应用于左表的行.           2.A2:添加外部行.       Ap ...

  6. Spring杂记BeanFactory之getBean方法

    1.(BeanFactory) getBean(beanName) 2.(AbstractBeanFactory) doGetBean 3.(AbstractBeanFactory) transfor ...

  7. Java-jacob-文件转HTML

    Java-jacob-文件转HTML: 下载jacob的jar包,然后举个例子. public static final int WORD_HTML = 8; public static final ...

  8. TCP/IP 笔记 - Internet协议

    IP是TCP/IP协议族中的核心协议,TCP.UDP.ICMP.IGMP数据都通过IP数据报传输.IP提供了一种"尽力而为.无连接"的数据交付服务:尽力而为表示不保证IP数据报能成 ...

  9. Docker两种方式进入后台运行的容器

    1.在启动容器的时候,有时候我们加了参数-d,这时容器自动进入后台运行.如果我们要进入容器,该怎么办?通常使用docker attach命令和nsenter工具. 2.docker attach是Do ...

  10. ClickHouse之初步认识

    最近在Percona的blog上看到一篇文章:Column Store Database Benchmarks: MariaDB ColumnStore vs. Clickhouse vs. Apac ...