何时使用PreventDefault（）vs Return false？ [英] When to use PreventDefault( ) vs Return false?

查看：85 发布时间：2019/2/18 12:16:41 javascript preventdefault

本文介绍了何时使用PreventDefault（）vs Return false？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先，在JavaScript的事件模型中，你将得到一个名为as bubbling
的概念
（这使得一个事件从子
元素传播到父元素）。为了避免
这种冒泡效应，许多开发人员
使用名为 stopPropagation（）的事件方法。
或者，开发人员已开始使用
return false 语句来停止此类传播。
现在，还有一个名为
preventDefault（）的术语。如名称所示，此
方法可防止触发
元素的任何默认行为。最好的用例是阻止
锚标记打开一个链接。

Firstly, in JavaScript's event model, you will come across a concept called as event bubbling (which makes an event to propagate from child element to a parent element). In order to avoid such kind of bubbling effect, many developers use an event method called stopPropagation( ). Alternatively, developers have started to use return false statement to stop such propagation. Now, there is another terminology called preventDefault( ). As the name indicates, this method prevents any default behavior of an element to trigger. Best use case is to prevent an anchor tag to open a link.

你可能遇到一个你想要阻止b $ b b b的情况来自
的锚标记打开链接（默认行为）以及停止
事件从上升到父级。
在这种情况下，你可以用单行完成两行代码，即
，即; return false

You may come across a scenario where you would like to prevent the anchor tag from opening a link (default behavior) as well as stop the event from going up to the parent. In such situation, instead of writing two lines of code, you can get it done in single line i.e; return false

推荐答案

返回false;

返回false; 当你调用它时会做3件事：

return false; does 3 separate things when you call it:

event.preventDefault（） - 它会停止浏览器的默认行为。

event.stopPropagation（） - 它阻止事件传播（或冒泡）DOM。

停止回调执行并在调用时立即返回。

event.preventDefault() – It stops the browsers default behaviour.
event.stopPropagation() – It prevents the event from propagating (or "bubbling up") the DOM.
Stops callback execution and returns immediately when called.

请注意，此行为与普通（非jQuery）不同事件处理程序，其中，特别是 return false 不会阻止事件冒泡。

Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.

preventDefault（）;

preventDefault（）; 做一件事：它会停止浏览器的默认行为。

preventDefault(); does one thing: It stops the browsers default behaviour.

何时使用它们？

我们知道他们做了什么但是什么时候使用它们？这完全取决于你想要完成什么。如果您想只是阻止默认的浏览器行为，请使用 preventDefault（）; 。使用return false;当您想要阻止默认浏览器行为并阻止事件传播DOM时。在大多数情况下你会使用return false;你真正想要的是 preventDefault（）。

We know what they do but when to use them? Simply it depends on what you want to accomplish. Use preventDefault(); if you want to "just" prevent the default browser behaviour. Use return false; when you want to prevent the default browser behaviour and prevent the event from propagating the DOM. In most situations where you would use return false; what you really want is preventDefault().

例子：

让我们试着用例子来理解：

Let’s try to understand with examples:

我们将看到纯JAVASCRIPT示例

We will see pure JAVASCRIPT example

示例1：

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

运行上面的代码，你会看到超链接'点击这里访问
stackoverflow.com'现在如果点击该链接，你将获得
javascript警告链接点击接下来，您将获得javascript
提醒 div Clicked ，您将立即重定向到
stackoverflow.com。

Run the above code you will see the hyperlink ‘Click here to visit stackoverflow.com‘ now if you click on that link first you will get the javascript alert Link Clicked Next you will get the javascript alert div Clicked and immediately you will be redirected to stackoverflow.com.

示例2：

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

运行上面的代码你会看到超链接'点击这里访问
stackoverflow.com'现在，如果你点击该链接，你将获得
javascript警告链接点击下一步你会得到javascript
提醒 div点击接下来你会看到超链接'点击这里
访问stackoverflow.com'替换为文字'点击事件被阻止'
，您将不重定向到stackoverflow.com。这是因为我们用来阻止默认点击
动作的event.preventDefault（）方法。

Run the above code you will see the hyperlink ‘Click here to visit stackoverflow.com‘ now if you click on that link first you will get the javascript alert Link Clicked Next you will get the javascript alert div Clicked Next you will see the hyperlink ‘Click here to visit stackoverflow.com‘ replaced by the text ‘Click event prevented‘ and you will not be redirected to stackoverflow.com. This is due > to event.preventDefault() method we used to prevent the default click action to be triggered.

示例3：

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

这一次，如果你点击链接，函数executeParent（）将不会被调用
，这次你将无法获得javascript警告 div Clicked
。这是因为我们使用event.stopPropagation（）方法阻止了传播到
父div。接下来，您将看到
超链接'点击此处访问stackoverflow.com'替换为文本
'Click事件将被执行'并立即将
重定向到stackoverflow.com 。这是因为我们没有阻止
使用
event.preventDefault（）方法触发此次的默认点击操作。

This time if you click on Link the function executeParent() will not be called and you will not get the javascript alert div Clicked this time. This is due to us having prevented the propagation to the parent div using event.stopPropagation() method. Next you will see the hyperlink ‘Click here to visit stackoverflow.com‘ replaced by the text ‘Click event is going to be executed‘ and immediately you will be redirected to stackoverflow.com. This is because we haven’t prevented the default click action from triggering this time using event.preventDefault() method.

示例4：

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

如果单击链接，函数executeParent（）将不会被
调用，您将无法获得javascript警报。这是因为
阻止了使用
event.stopPropagation（）方法传播到父div。接下来，您将看到超链接'Click
here here to visit stackoverflow.com'替换为文本'Click event
prevent'，您将不会被重定向到stackoverflow.com。这个
是因为我们这次使用event.preventDefault（）方法阻止了默认点击操作触发
。

If you click on the Link, the function executeParent() will not be called and you will not get the javascript alert. This is due to us having prevented the propagation to the parent div using event.stopPropagation() method. Next you will see the hyperlink ‘Click here to visit stackoverflow.com‘ replaced by the text ‘Click event prevented‘ and you will not be redirected to stackoverflow.com. This is because we have prevented the default click action from triggering this time using event.preventDefault() method.

示例5：

对于返回false，我有三个示例，似乎都是做完全相同的事情（只是返回false），但实际上
结果是完全不同的。以下是
中每个实际发生的情况。

个案：

从内联事件处理程序返回 false 会阻止浏览器导航到链接地址，但它不会阻止事件传播DOM。

从jQuery事件处理程序返回 false 会阻止浏览器导航到链接地址，并阻止事件通过DOM传播。

从常规DOM事件处理程序返回 false 绝对没有。

Returning false from an inline event handler prevents the browser from navigating to the link address, but it doesn't stop the event from propagating through the DOM.
Returning false from a jQuery event handler prevents the browser from navigating to the link address and it stops the event from propagating through the DOM.
Returning false from a regular DOM event handler does absolutely nothing.

将看到所有三个例子。

内联返回false。

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='return false'>Click here to visit stackoverflow.com</a>
</div>
<script>
  var link = document.querySelector('a');

  link.addEventListener('click', function() {
    event.currentTarget.innerHTML = 'Click event prevented using inline html'
    alert('Link Clicked');
  });


  function executeParent() {
    alert('Div Clicked');
  }
</script>

从jQuery事件处理程序返回 false 。

Returning false from a jQuery event handler.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='http://stackoverflow.com'>Click here to visit stackoverflow.com</a>
</div>
<script>
  $('a').click(function(event) {
    alert('Link Clicked');
    $('a').text('Click event prevented using return FALSE');
    $('a').contents().unwrap();
    return false;
  });
  $('div').click(function(event) {
    alert('Div clicked');
  });
</script>

从常规DOM事件处理程序返回false。

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
    return false
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

希望这些例子清楚。尝试在html文件中执行所有这些示例，看看它们是如何工作的。

Hope these examples are clear. Try executing all these examples in a html file to see how they work.

这篇关于何时使用PreventDefault（）vs Return false？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

何时使用PreventDefault（）vs Return false？ [英] When to use PreventDefault( ) vs Return false?

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

何时使用PreventDefault（）vs Return false？ [英] When to use PreventDefault( ) vs Return false?

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭