当我们点击一个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;相当于同时调用了preventDefault和stopPropagation方法,这会导致当前元素的事件无法向上冒泡,在事件代理模式下,会导致问题。

比如,我有一个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. string类型转换int类型

    C++转换形式(C++11): int main(int argc, char* argv[]) { std::"; std::string str2 = "3.14159&quo ...

  2. eclipse逐步调试

    Eclipse 的单步调试 1.设置断点在程序里面放置一个断点,也就是双击需要放置断点的程序左边的栏目上.2.调试(1)点击"打开透视图"按钮,选择调试透视图,则打开调试透视图界面 ...

  3. 关于datepicker只显示年、月、日的设置

    关键时侯,还得看官方文档.花了半个多小时,找了网上一大堆答复,然后一一验证,90%没有能解决问题. 先给出官方文档的URL: http://bootstrap-datepicker.readthedo ...

  4. ABAP 订单-交货单-发货过账自动完成 案例

    *&---------------------------------------------------------------------* *& Report  ZSDR006 ...

  5. Swift 备忘单和快速参考

    Variables var myInt = var myExplicitInt: Int = // explicit type var x = , y = , z = // declare multi ...

  6. arm_GPIO_简单编程例题

    题目 分析下面的汇编led.s,查看S5PV210手册,说明程序的功能,和最终的运行结果,以及相关的硬件原理图,S5PV210手册可以在教学资源里的学习资料文件夹中下载. .equ   GPH3CON ...

  7. [原创]Windows Server 2003 物理机转换为VMware虚拟机出现VSS错误的处理

    一台Windows Server 2003 物理机需要转换为VMware虚拟机,工具为Vmware vCenter Converter Standalone 6.0,转换开始就出现错误“FAILED: ...

  8. lnmp安装

    一.准备工作 需要的安装包都是从官网下载的,系统centos6.6 nginx-1.10.1.tar.gz php-5.6.24.tar.gz mysql-5.5.32.tar.gz 所有的包都一传入 ...

  9. Delphi XE 10 DataSnap TCP 与 HTTP 比较

    在网络程序开发过程中,面临TCP  HTTP 的选择上往往让人陷入犹豫不决中,http的灵活和较强的穿透能力是TCP无法与之相提并论的,然而在响应速度和处理能力上却能看出后者比前者足够强大的地方.因此 ...

  10. CentOS7 Tomcat 环境部署

    java由jvm虚拟机和一些本地类库(与操作系统通信的底层库)和java类库组成.javase由jdk和一些基本api组成,而javaee则在javase基础上添加了一些企业常用的类库,其中两个著名a ...