event.preventDefault() vs. return false (no jQuery) event.preventDefault()与return false (无jQuery)的区别

9 浏览
0 Comments

event.preventDefault() vs. return false (no jQuery) event.preventDefault()与return false (无jQuery)的区别

我想知道event.preventDefault()和return false是否相同。\n我进行了一些测试，看起来：\n

    \n

  • 如果使用旧模型添加事件处理程序，例如\n 
    elem.onclick = function(){
    return false;
};

    \n那么，return false会阻止默认操作，就像event.preventDefault()。

    • \n

  • 如果使用addEventListener添加事件处理程序，例如\n 
    elem.addEventListener(
    'click',
    function(e){
        return false;
    },
    false
);

    \n那么，return false不会阻止默认操作。

    • \n

\n所有浏览器都是这样做的吗？\nevent.preventDefault()和return false之间还有更多的区别吗？\n我在哪里可以找到关于在某些情况下return false的行为类似于event.preventDefault()的文档（在MDN上找不到）？\n

\n我的问题只涉及纯JavaScript，不涉及jQuery，请不要将其标记为event.preventDefault() vs. return false的重复问题，即使这两个问题的标题几乎相同。

0

3 答案

0 Comments 

在JavaScript中，我们可以使用三种方式来控制父控件和服务器端代码的操作：return false、preventDefault()和stopPropogation()。
return false - 只允许控件的客户端事件触发，不会触发控件的服务器端事件和父控件的客户端事件。
preventDefault() - 允许控件的客户端事件和父控件的客户端事件触发，但不会触发控件的服务器端事件。
stopPropogation() - 允许控件的客户端事件和服务器端事件触发，但不允许触发控件的客户端事件。
有人错误地认为return false可以停止事件冒泡，但实际上不会停止父控件的事件触发。此外，关于“服务器端点击事件”的说法也不准确。
在JavaScript和事件处理中，并不存在“服务器端”这个概念。

0
0 Comments

event.preventDefault()和return false（无jQuery）之间的区别是，它们在处理事件的方式上有所不同。event.preventDefault()是一个方法，用于阻止事件的默认行为，比如点击链接后阻止页面刷新或跳转。而return false是一个语句，只在使用on*事件处理程序（例如onclick属性）时才可以使用，用于取消事件的默认行为。

问题的出现是因为有人错误地将onclick属性和addEventListener方法视为相同的行为。事实上，它们具有不同的API，因此在处理事件时返回值（例如false）会被忽略。使用onclick属性时，事件处理程序函数会被包装在另一个函数中，导致return false不起作用。为了解决这个问题，可以将onclick属性设置为"return myHandlerFunc();"，确保onclick返回myHandlerFunc的返回值（false）。

另一个解决方法是使用addEventListener方法注册事件处理程序，并在事件处理程序中使用event.preventDefault()来阻止事件的默认行为。这种方法不需要使用return false。

问题的解决方法是使用event.preventDefault()来阻止事件的默认行为，而不是使用return false。在使用onclick属性时，需要将事件处理程序函数包装在函数调用中，并使用"return functionName();"的形式。在使用addEventListener方法时，可以直接使用event.preventDefault()来阻止事件的默认行为。

希望这篇文章能帮助读者更好地理解和解决问题。如果遇到事件处理程序不按预期工作的情况，可以使用浏览器开发工具中的getEventListeners API来查看事件监听器的情况。

0
0 Comments

W3C文档对象模型事件规范在“1.3.1.事件注册接口”中指出，EventListener中的handleEvent方法没有返回值。在“1.2.4.事件取消”下，文档还指出通过调用事件的preventDefault方法来取消事件。如果一个或多个EventListener在事件流的任何阶段调用preventDefault，那么默认操作将被取消。

根据HTML5规范的更新，返回值的处理方式有所不同。HTML规范的“7.1.5.1”部分指出，如果返回值是WebIDL布尔值false，则取消事件，除了“mouseover”事件以外的所有事件都是如此。

我仍然建议在大多数项目中使用event.preventDefault()，因为这样可以与旧规范和较旧的浏览器兼容。只有在只需要支持最新浏览器的情况下，返回false来取消事件才可以接受。

从一些快速在Chrome中的测试中可以看出，无论是返回false还是使用event.preventDefault()都不能停止事件传播。

这个链接是在2000年编写的。HTML5规范（w3.org/TR/html5/webappapis.html#event-handler-attributes）似乎处理了许多事件的返回值（不包括mouseover事件）：“如果返回值是WebIDL布尔值false，则取消事件”。

通过这个链接（http://jsfiddle.net/m1L6of9x/）可以比较stopPropagation()、preventDefault()和return false的行为。在现代浏览器上，后两者具有相同的行为。

0