event.preventDefault()与返回false

2020/09/14 04:01 · javascript ·  · 0评论

当我想阻止其他事件处理程序在触发某个事件后执行时,可以使用两种技术之一。我将在示例中使用jQuery,但这也适用于纯JS:

1。 event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2。 return false

$('a').click(function () {
    // custom handling here
    return false;
});

这两种停止事件传播的方法之间是否有显着差异?

对我来说,return false;比执行一个方法更简单,更短并且更容易出错。使用该方法时,您必须记住正确的大小写,括号等。

另外,我必须在回调中定义第一个参数才能调用该方法。也许,出于某些原因,我应该避免这样做并preventDefault改为使用它有什么更好的方法?

return false一个jQuery事件处理程序内是有效的与调用都 e.preventDefaulte.stopPropagation传递上jQuery.Event对象。

e.preventDefault()将防止发生默认事件,e.stopPropagation()将防止事件冒泡,并且return false两者都会发生。请注意,此行为不同于正常(非jQuery的)事件处理程序,其中,值得注意的是,return false没有冒泡停止该事件。

资料来源:John Resig

使用event.preventDefault()代替“ return false”来取消href点击有什么好处?

根据我的经验,使用event.preventDefault()至少比使用return false有一个明显的优势。假设您正在捕获锚标记上的click事件,否则如果要从当前页面导航到用户,这将是一个大问题。如果您的点击处理程序使用return false阻止浏览器导航,则可能导致解释器无法到达return语句,浏览器将继续执行锚标记的默认行为。

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

使用event.preventDefault()的好处是您可以将其添加为处理程序中的第一行,从而确保无论是否到达函数的最后一行,锚都不会触发默认行为(例如,运行时错误) )。

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

顾名思义,这不是一个“ JavaScript”问题。这是关于jQuery设计的问题。

jQuery和先前来自John Resig的链接引用(在karim79的 消息中)似乎是对事件处理程序在一般情况下如何工作的误解。

事实:返回false的事件处理程序将阻止该事件的默认操作。它不会停止事件传播。自从Netscape Navigator过去以来,事件处理程序就一直以这种方式工作。

MDN文档说明return false了事件处理程序的工作方式

jQuery中发生的事情与事件处理程序中发生的事情不同。DOM事件侦听器和MSIE“附加”事件完全是另一回事。

有关更多信息,请参阅MSDN上的attachEventW3C DOM 2事件文档

通常,您要采用的第一个选项(preventDefault()),但是您必须知道您所处的环境以及目标是什么。

加油您的编码return false;vs event.preventDefault()vs event.stopPropagation()vs vs event.stopImmediatePropagation()有一篇很棒的文章

使用jQuery时,return false在调用它时会做3件事:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. 停止回调执行并在调用时立即返回。

有关更多信息和示例,请参见jQuery Events:Stop(Mis)Using Return False

您可以在onClick事件上为一个元素挂起许多功能您如何确定false一个将是最后一个被解雇的人?preventDefault另一方面,肯定会仅阻止元素的默认行为。

我认为

event.preventDefault()

是w3c指定的取消事件的方式。

您可以在W3C有关事件取消的规范中阅读此内容

同样,您不能在所有情况下都使用return false。当在href属性中提供javascript函数时,如果返回false,则用户将被重定向到写有错误字符串的页面。

我认为最好的方法是使用它,event.preventDefault()因为如果处理程序中引发了某些异常,则return false语句将被跳过,并且其行为将与您想要的相反。

但是,如果您确定代码不会触发任何异常,则可以使用任何所需的方法。

如果您仍然希望使用return false,那么可以将整个处理程序代码放入如下所示的try catch块中:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

My opinion from my experience saying, that it is always better to use

event.preventDefault() 

Practically
to stop or prevent submit event, whenever we required rather than return false
event.preventDefault() works fine.

return false之间的主要区别event.preventDefault()是,下面的代码return false将不会执行,并且event.preventDefault()如果您的代码将在此语句后执行,则不会

当您编写return false时,它将在后台为您做以下事情。

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

e.preventDefault();

It simply stops the default action of an element.

Instance Ex.:-

prevents the hyperlink from following the URL, prevents the submit button to submit the form. When you have many event handlers and you just want to prevent default event from occuring, & occuring from many times,
for that we need to use in the top of the function().

Reason:-

The reason to use e.preventDefault(); is that in our code so something goes wrong in the code, then it will allow to execute the link or form to get submitted or allow to execute or allow whatever action you need to do. & link or submit button will get submitted & still allow further propagation of the event.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

return False;

它只是停止执行function()。

return false;”将结束整个过程的执行。

原因:-

使用return false的原因;就是您不想再在严格模式下执行该功能。

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>

基本上,通过这种方式组合事物,因为jQuery是一个主要关注HTML元素的框架,基本上可以防止使用默认元素,但是与此同时,您可以停止传播以冒泡。

所以我们可以简单地说,返回false jQuery等于:

返回false是e.preventDefault和e.stopPropagation

但也不要忘记,所有这些都在jQuery或DOM相关函数中,当您在元素上运行它时,基本上,它可以防止一切触发,包括默认行为和事件传播。

基本上使用启动前return false;,先了解什么e.preventDefault();e.stopPropagation();做什么,然后,如果你认为你既需要在同一时间,然后简单地使用它。

所以基本上这段代码如下:

$('div').click(function () {
  return false;
});

等于该代码:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

根据我的经验,event.stopPropagation()主要用于CSS效果或动画作品中,例如,当您同时具有卡片和按钮元素的悬停效果时,当您在按钮上悬停时,卡片和按钮的悬停效果都会在这种情况下触发,您可以使用event.stopPropagation()停止冒泡操作,而event.preventDefault()用于阻止浏览器操作的默认行为。例如,您有一个表单,但您仅为该提交操作定义了click事件,如果用户通过按Enter提交表单,则该事件是由keypress事件触发的浏览器,而不是您的click事件,因此应使用event.preventDefault()以避免不合适行为。我不知道该死的是假。对不起。有关更多说明,请访问此链接并在#33行播放https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

本文地址:http://javascript.askforanswer.com/event-preventdefaultyufanhuifalse.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!