何时使用PreventDefault（）vs Return false？ [重复]

问题描述 投票：43回答：1

这个问题在这里已有答案：

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

您可能会遇到一种情况，您希望阻止锚标记打开链接（默认行为）以及阻止事件上升到父级。在这种情况下，你可以用单行来完成它，而不是写两行代码，即; return false

javascript preventdefault
1个回答
113
投票

返回false;

当你打电话时，return false;会做三件事：

  1. event.preventDefault() - 它会停止浏览器的默认行为。
  2. event.stopPropagation() - 它可以防止事件传播（或“冒泡”）DOM。
  3. 停止回调执行并在调用时立即返回。

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

的preventDefault（）;

preventDefault();做了一件事：它停止了浏览器的默认行为。

什么时候使用它们？

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

例子：

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

我们将看到纯JAVASCRIPT示例

例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点击并立即你将被重定向到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'替换为文本'Click event prevent'，您将不会被重定向到stackoverflow.com。这是由于我们用来阻止触发默认点击操作的event.preventDefault（）方法。

例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 is going to be executed'
    alert('Link Clicked');
  }

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

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

例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 to visit stackoverflow.com'替换为文本'Click event prevent'，您将不会被重定向到stackoverflow.com。这是因为我们使用event.preventDefault（）方法阻止了此次触发的默认单击操作。

例5：

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

案例：

  1. 从内联事件处理程序返回false会阻止浏览器导航到链接地址，但它不会阻止事件通过DOM传播。
  2. 从jQuery事件处理程序返回false会阻止浏览器导航到链接地址，并阻止事件通过DOM传播。
  3. 从常规DOM事件处理程序返回false绝对没有任何意义。

将看到所有三个例子。

  1. 内联返回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>
  1. 从jQuery事件处理程序返回false。

<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>
  1. 从常规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文件中执行所有这些示例，看看它们是如何工作的。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.