当我们点击一个a标签时,如果这个标签的href指向了另一个地址,那么浏览器会默认跳转到此地址。在页面中,有时我们需要触发点击事件,但是又不想触发默认行为,就需要阻止event的默认行为了。

常规做法

众所周知,IE早期版本的event对象与DOM标准中的event对象并不相同,所以一般的兼容性写法是这样的:

if (event.preventDefault) {
event.preventDefault(); //支持DOM标准的浏览器
} else {
event.returnValue = false; //IE
}

非常规

在原生JS下

但是还有一种人,喜欢在函数结尾用return false;来阻止event默认行为,不过这种方法覆盖面不全,不建议使用,先来看规范是如何定义的:
W3C Document Object Model Events Specification 1.3.1版中。

在jQuery下:

jQuery中,就不是简单的覆盖面和规范的问题了。在jQuery事件处理函数中调用return false;相当于同时调用了preventDefaultstopPropagation方法,这会导致当前元素的事件无法向上冒泡,在事件代理模式下,会导致问题。

比如,我有一个div容器,里面是 几个a标签,它们的href里分别存储了url地址,这个url被用来动态的载入到下面的div#content中,这里为了简单演示,就只把url字符串写入到div#content中:

<div id="container">
<a href="/content1.html">content1</a>
<a href="/content2.html">content2</a>
<div id="content">我会根据点击链接的url不同而改变的</div>
</div>
// 为container下的所有a标签绑定click事件处理函数
$("#container").click(function (e) {
if (e.target.nodeName == "A") {
$("#content").html(e.target.href);
}
});
// 再为a标签绑定click事件处理函数,阻止默认事件
$("#container a").click(function () {
return false;
});

上面的代码运行后,虽然阻止了a标签的点击默认行为,但同时停止了冒泡事件,导致其外层的父元素无法检测到click事件,所以jQuery中请明白return false;preventDefault二者的区别。

总结

不要用return false;来阻止event的默认行为

不使用return false阻止event默认行为的更多相关文章

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

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

  2. form 表单中 button 按钮用 return false 阻止默认刷新踩过的一个小坑

    今天在写一个button按钮的事件时,明明在点击事件的最后写了 return false,可是点击按钮页面仍然会自动刷新 最后看到刷新前 控制台有一抹红色一闪而过,由于速度很快,之前一直都注意到 后来 ...

  3. 理解阻止浏览器默认事件和事件冒泡cancelBubble

    一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...

  4. event.stopPropagation()、event.preventDefault()与return false的区别

    做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...

  5. JS preventDefault ,stopPropagation ,return false

    所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件.监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件.浏览器的默认事件:特定页面元素上带的 ...

  6. preventDefault()、stopPropagation()、return false 之间的区别

    “return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...

  7. Javascript:阻止浏览器默认右键事件,并显示定制内容

    在逛一些知名图片社区的时候,遇到自己心怡的图片,想要右键另存的时候,默认的浏览器菜单不见了,却出现了如:[©kevin版权所有]之类的信息: 今天在看Javascript事件默认行为相关的知识,所以, ...

  8. 聊聊return false

    最近在做一些关于视频切换的时候.由于是用a标签做的会有默认的跳转.这时候我就想到了,return flase.阻止默认行为,也达到了预期的效果.后来就详细查了查.让我们来看看 “return fals ...

  9. javascript中的return、return true、return false、continue区别

    1.语法为:return 表达式; 2.w3c中的解释: 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果  也就是:当代码执行到return语句时,函数返回一个结果就结束运行了,ret ...

随机推荐

  1. Oracle的SQL语句中的变量替换

    一.问题描述 如下SQL: INSERT INTO tmp(val)VALUES('a&b'); 执行过程中会出现如下提示: 点击"确定"过后我们查看表中的数据: b后面的 ...

  2. JAVA基础学习——1.1 环境搭建 之jdk安装,环境变量配置 (系统Win10,64bit)

    大学里虽然老师教过JAVA,但我没学.后来工作了,断断续续的也碰到了JAVA的项目,都是拉过来就干的节奏.也没有好好系统的学习一下. 从今天开始系统学习整理一下JAVA,以后再碰到JAVA项目的时候, ...

  3. 文件权限:普通(r、w、x)和特殊(s、t)

     linux中,常常涉及到权限的问题.文件的权限有3组,owner,group,other,每一组都有rwx三种设置.r(4):可读:w(2):可写:x(1):可执行.我们在执行shell命令ls - ...

  4. 开发维护大型 Java 项目的建议

    假设你是正在开发和维护一个包含2000个类并使用了很多框架的Java开发者.你要如何理解这些代码?在一个典型的Java企业项目小组中,大部 分能够帮你的高级工程师看起来都很忙.文档也很少.你需要尽快交 ...

  5. [转]程序员趣味读物:谈谈Unicode编码

    from : http://pcedu.pconline.com.cn/empolder/gj/other/0505/616631_all.html#content_page_1 这是一篇程序员写给程 ...

  6. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  7. 基于Solr的空间搜索

    如果需要对带经纬度的数据进行检索,比如查找当前所在位置附近1000米的酒店,一种简单的方法就是:获取数据库中的所有酒店数据,按经纬度计算距离,返回距离小于1000米的数据. 这种方式在数据量小的时候比 ...

  8. RabbitMQ的几种应用场景

    RabbitMQ是一个消息代理,从“生产者”接收消息并传递消息至“消费者”,期间可根据规则路由.缓存.持久化消息.“生产者”也即message发送者以下简称P,相对应的“消费者”乃message接收者 ...

  9. js new

    如果一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上 即: function B(){} var a=new B( ...

  10. js对象克隆方法

    方法1: function clone(obj){ var o; switch(typeof obj){ case 'undefined': break; case 'string' : o = ob ...