不使用return false阻止event默认行为
当我们点击一个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默认行为的更多相关文章
- 关于js中return false、event.preventDefault()和event.stopPropagation()
在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此 ...
- form 表单中 button 按钮用 return false 阻止默认刷新踩过的一个小坑
今天在写一个button按钮的事件时,明明在点击事件的最后写了 return false,可是点击按钮页面仍然会自动刷新 最后看到刷新前 控制台有一抹红色一闪而过,由于速度很快,之前一直都注意到 后来 ...
- 理解阻止浏览器默认事件和事件冒泡cancelBubble
一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...
- event.stopPropagation()、event.preventDefault()与return false的区别
做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
- JS preventDefault ,stopPropagation ,return false
所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件.监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件.浏览器的默认事件:特定页面元素上带的 ...
- preventDefault()、stopPropagation()、return false 之间的区别
“return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...
- Javascript:阻止浏览器默认右键事件,并显示定制内容
在逛一些知名图片社区的时候,遇到自己心怡的图片,想要右键另存的时候,默认的浏览器菜单不见了,却出现了如:[©kevin版权所有]之类的信息: 今天在看Javascript事件默认行为相关的知识,所以, ...
- 聊聊return false
最近在做一些关于视频切换的时候.由于是用a标签做的会有默认的跳转.这时候我就想到了,return flase.阻止默认行为,也达到了预期的效果.后来就详细查了查.让我们来看看 “return fals ...
- javascript中的return、return true、return false、continue区别
1.语法为:return 表达式; 2.w3c中的解释: 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 也就是:当代码执行到return语句时,函数返回一个结果就结束运行了,ret ...
随机推荐
- python模块引用问题(比较杂乱,懒得整理)
1 在stackoverflows摘抄 If the import module in the same dir, use e.g: from . import core If the import ...
- Eclipse最常用快捷键
常用快捷键: Ctrl + 1 :快速修复(当编辑器出现红色波浪线时使用此快捷键能快速弹出提示) Ctrl + d :删除当前光标所在的行 Ctrl + z :撤销上一步的操作 Ctrl + y :重 ...
- selenium测试框架篇,页面对象和元素对象的管理
前期已经做好使用Jenkins做buildhttp://www.cnblogs.com/tobecrazy/p/4529399.html 做自动化框架,不可避免的就是对象库. 有一个好的对象库,可以让 ...
- ecshop不同样式文章页调用不同文章模板
根据需要,希望不同的文章分类下的文章页有不一样的页面风格.也就是说根据文章分类ID来判断,输出不同的文章页模板. 重点就是文章分类的ID. 打开:article.php,在120多行左右,找到$sma ...
- vs2013在使用ReportView11时遇到的问题
最近在做项目中用到2013中的ReportView11 在本机IIS中使用完全没问题 但是放到服务器上总是出问题 解决办法:(1)首先在自己机器上开发的时候 是不用引用 Microsoft.R ...
- java注解处理
1.自定义注解类型 package com.yc.annotation; import java.lang.annotation.ElementType; import java.lang.ann ...
- 中国知网cnki(永久会员账号)
中国知网cnki(永久会员账号)大男孩免费分享 网站简介: (中国知网http://www.cnki.net/)中国知网是国家知识基础设施(National Knowledge Infrastru ...
- 基于SSM的租赁管理系统0.3_20161225_数据库设计
数据库设计 1. 概念模型 2. 类模型 3. 生成SQL use test; /*========================================================== ...
- html常用标签介绍
常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...
- SQL Server 2012 开发新功能 序列对象(Sequence)(转)
转载链接:http://www.cnblogs.com/zhangyoushugz/archive/2012/11/09/2762720.html 众所周知,在之前的sqlserver版本中,一般采用 ...