文档章节

jQuery中return false,e.preventDefault(),e.stopPropa

张悟空
 张悟空
发布于 2016/04/22 10:46
字数 282
阅读 86
收藏 0
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就是事件对象。

 

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


$("a").click(function (e) {
     alert("默认行为被禁止喽");
     e.preventDefault();
});

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

 

 

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

 

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

if (ret===false){
  event.preventDefault();
  event.stopPropagation();
}

本文转载自:http://blog.csdn.net/woshixuye/article/details/7422985

张悟空

张悟空

粉丝 8
博文 71
码字总数 20588
作品 0
郑州
程序员
私信 提问
阻止事件冒泡和浏览器的默认行为

javascript 1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) //因此它支持W3C的stopPropaga...

JellyFlower
2014/06/27
554
0
关于javaweb

jquery部分: $(function(){ $("#delete").click(function(){ var $del = $(this).parent().parent(); var title = $.trim($del.find("td:first").text()); var flag = confirm("确定要删除"......

凉皮queen
2017/04/01
99
2
写的一个轻量级javascript框架的设计模式

公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松...

thinkyoung
2014/12/05
0
0
简析JavaScript中的Function类型(三)——作为值的函数

因为在ECMAScript中,函数名本身就是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。 1. 作...

Bob2100
2019/03/23
13
0
该如何配置bpopup的iframe中URL自动获取链接

;(function($) { $(function() { $('a#iframe').bind('click', function(e) { e.preventDefault(); $('#popup-content').bPopup({ content:'iframe', contentContainer:'.content', loadUrl:......

林林里
2013/10/01
313
0

没有更多内容

加载失败,请刷新页面

加载更多

HBase二次开发之搭建HBase调试环境,如何远程debug HBase源代码

版本 HDP:3.0.1.0 HBase:2.0.0 一、前言 之前的文章也提到过,最近工作中需要对HBase进行二次开发(参照HBase的AES加密方法,为HBase增加SMS4数据加密类型)。研究了两天,终于将开发流程想...

CREATE_17
31分钟前
46
0
JSP-Servlet入门2之JSP运行原理(一)

JSP全名为Java Server Pages,中文名叫java服务器页面,是一种动态页面技术 。实际上JSP是指在HTML中嵌入java脚本语言, 一、 JSP起源 在很多动态网页中,绝大部分内容都是固定不变的,只有局...

橘子_
52分钟前
12
0
Python断言的最佳实践

使用assert作为标准代码的一部分而不是仅仅用于调试目的,是否存在性能或代码维护问题? 是 assert x >= 0, 'x is less than zero' 好或坏比 if x < 0: raise Exception, 'x is less than z......

技术盛宴
56分钟前
17
0
Ruby中有“do ... while”循环吗?

我正在使用此代码让用户输入名称,而程序将它们存储在一个数组中,直到它们输入一个空字符串(他们必须在每个名称后按Enter键): people = []info = 'a' # must fill variable with somet...

javail
今天
55
0
MySQL 索引总结

1、索引是做什么的? 想象一下,你面前有本词典,数据就是书的正文内容,你就是那个cpu,而索引,则是书的目录 索引用于快速找出在某个列中有一特定值的行。不使用索引,MySQL必须从第1条记录...

chen_chen_chen_
今天
59
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部