将“返回false”添加到单击事件侦听器的效果如何?
很多时候我在HTML页面看到过这样的链接:
<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>
那里的return false
有什么影响?
另外,我通常不会在button中看到。
这是指定的任何地方? 在W3C的一些规格?
事件处理程序的返回值确定是否也应该发生默认的浏览器行为。 在点击链接的情况下,这将在链接之后,但是在表单提交处理程序中差异最明显,如果用户input信息时出现错误,您可以取消表单提交。
我不相信这是一个W3C规范。 所有这样的古老的JavaScript接口都被赋予了昵称“DOM 0”,并且大部分都是未指定的。 阅读旧的Netscape 2文档可能会有一些运气。
实现这种效果的现代方法是调用event.preventDefault()
,这在DOM 2 Events规范中指定。
你可以看到与下面的例子不同:
<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>
点击“好”返回true,然后链接。 点击“取消”返回false,不会跟随链接。 如果javascript被禁用,则链接正常。
这是一个更强大的例程来取消所有浏览器中的默认行为和事件冒泡:
// Prevents event bubble up or any usage after this is called. eventCancel = function (e) { if (!e) if (window.event) e = window.event; else return; if (e.cancelBubble != null) e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); if (e.preventDefault) e.preventDefault(); if (window.event) e.returnValue = false; if (e.cancel != null) e.cancel = true; }
一个如何在事件处理程序中使用的例子:
// Handles the click event for each tab Tabstrip.tabstripLinkElement_click = function (evt, context) { // Find the tabStrip element (we know it's the parent element of this link) var tabstripElement = this.parentNode; Tabstrip.showTabByLink(tabstripElement, this); return eventCancel(evt); }
什么“返回假”真的在做什么?
当你调用它时,返回false实际上是在做三件非常独立的事情:
- event.preventDefault();
- event.stopPropagation();
- 停止callback执行,并在调用时立即返回。
有关更多信息,请参阅jquery-events-stop-misusing-return-false 。
例如 :
同时点击此链接,返回false将取消浏览器的默认行为 。
<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>
从JavaScript事件中重新调用false通常会取消“默认”行为 – 在链接的情况下,它会告诉浏览器不要跟随链接。
我相信这会导致标准事件不会发生。
在你的例子中,浏览器不会尝试去#。
返回false将停止运行javascript后的超链接。 这对于优雅降级的不引人注意的JavaScript很有用 – 例如,您可以使用JavaScript来打开全尺寸图像的popup窗口。 当javascript被closures或图像被中间点击(在新标签中打开)时,这忽略了onClick事件,并且通常只是以全尺寸的图像打开图像。
如果未指定return false,图像将同时启动popup窗口并正常打开图像。 有些人不使用返回false使用javascript作为href属性,但这意味着当javascript被禁用时,链接将不会执行任何操作。
在onclick事件中使用return false将阻止浏览器处理其余的执行堆栈,其中包括跟踪href属性中的链接。
换句话说,添加返回false将停止href的工作。 在你的例子中,这正是你想要的。
在button,这是没有必要的,因为onclick是它将永远执行 – 没有href处理和去。
浏览器黑客: http : //jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html
return false
可防止页面被导航,并且不必要的滚动窗口到顶部或底部。
onclick="return false"
返回false将阻止导航。 否则,该位置将成为someFunc的返回值
返回false是说不采取默认的行动,这是在一个<a href>
的情况下是跟随链接。 当你返回false onclick,那么href将被忽略。
我很惊讶,没有人提到onmousedown
而不是onclick
。 该
onclick='return false'
不会捕获浏览器的默认行为,导致mousedown
发生(有时是不需要的)文本select
onmousedown='return false'
确实。
换句话说,当我点击一个button,它的文本有时会变成意外的select,改变button的外观,这可能是不需要的。 这是我们在这里试图阻止的默认行为。 然而, mousedown
事件是在click
之前注册的,所以如果只阻止click
处理程序中的行为,它不会影响mousedown
事件引起的不需要的select。 所以文本仍然被选中。 但是,防止mousedown
事件的默认会完成这项工作。
另请参阅event.preventDefault()与返回false