不使用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;相当于同时调用了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的默认行为

时间: 2024-10-12 13:46:30

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

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

在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此总结下它俩的区别,顺便带上event.stopPropagation()一起区分下. 一.原生js中: 关于return false和preventDefault: 在W3C Document Object Model Events Specification1.3版本中提到过: The Event

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

一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先天,默认好的了. 2.看个demo,阻止浏览器默认的右键弹出菜单,而且弹出自己自定义的菜单.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type=&

JS——事件详情(默认行为、阻止默认行为的用法:return false等)

默认行为 1>默认行为 解释——也称作:默认事件.即不需要自己编写代码,浏览器自身所具备的一些功能 例如下图片所示: 在浏览器中单击右键,出现浏览器默认的菜单栏选项(这是最简单的默认行为) 2>阻止默认行为 案例1:屏蔽右键菜单(即消除上图所示的“浏览器右键出现菜单栏”事件) 代码如下所示: 注:oncontextmenu 事件:在元素中用户右击鼠标时触发并打开上下文菜单.并用return false(普通写法)来阻止默认行为[关于阻止默认行为,这篇文章可以好好阅读:http://caibao

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

"return false"之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码 $("a.toggle").click(function () { $("#mydiv").toggle(); return

return false的正确用法

“return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢 可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码: 复制代码代码如下: $("a.toggle").click(function () {      $("#mydiv").toggle();   

聊聊return false

最近在做一些关于视频切换的时候.由于是用a标签做的会有默认的跳转.这时候我就想到了,return flase.阻止默认行为,也达到了预期的效果.后来就详细查了查.让我们来看看 "return false"之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢 可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件

JS preventDefault ,stopPropagation ,return false

所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件.监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件.浏览器的默认事件:特定页面元素上带的功能,如a标签的href跳转,表单的提交事件.执行监听事件在先,浏览器默认事件在后,所以可以在监听事件函数中,阻止浏览器的默认行为.区别:preventDefault() 阻止浏览器默认事件 stopPropagation() 阻止事件的冒泡 return false; 阻止后续的所有行为 1 <!

关于return false

一.返回控制与函数结果,语法为:return 表达式;语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. Return False 就相当于终止符,Return True 就相当于执行符. 在js中return false的作用一般是用来取消默认动作的.比如你单击一个链接除了触发你的 on

js中return;、return true、return false;区别

一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果  二.返回控制, 无函数结果,语法为:return;  在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.    Return False 就相当于终止符,Return True 就相当于执行符.    在js中return false的作用一般是用来取消默认动作的.比如你单击一