Question

首先，在JavaScript的事件模型中，你会来跨越一个被称为事件冒泡的概念（这使得一个事件从孩子传播元素到父元素）。为了避免这种冒泡效应，很多开发商使用名为stopPropagation( )的事件方法。或者，开发人员已经开始使用 return false声明阻止此类传播。现在，有一个名为的术语 preventDefault( )。顾名思义，这个方法可以防止任何默认行为要触发的元素。最好的用例是防止锚标签打开链接。

您可能会遇到一个情景我想阻止锚标签打开一个链接（默认行为）以及停止上升到父母的事件。在这种情况下，而不是写两行代码，你可以用一条线完成它，即; return false

Answer 1

返回false;

当你打电话时，

return false;分别做三件事：

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

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

<强>的preventDefault（）;

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

何时使用？

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

<强>示例：

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

我们将看到纯粹的JAVASCRIPT示例

示例1：

＆＃13;

<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>

＆＃13;

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

示例2：

＆＃13;

<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>

＆＃13;

运行上面的代码，你会看到超链接'点击这里访问 stackoverflow.com'现在，如果你先点击该链接，你会得到 javascript提醒链接点击接下来，您将获得javascript 警告 div单击接下来，您将看到超链接'点击此处访问stackoverflow.com'替换为文本'Click事件被阻止' 您将不重定向到stackoverflow.com。这是因为＆gt; to event.preventDefault（）方法我们用来防止默认点击要触发的行动。

示例3：

＆＃13;

<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>

＆＃13;

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

示例4：

＆＃13;

<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>

＆＃13;

如果单击Link，则函数executeParent（）将不会被叫，你不会得到javascript警报。这是由于我们防止使用传播到父div event.stopPropagation（）方法。接下来，您将看到超链接'Click 这里访问stackoverflow.com'替换为文本'Click事件阻止'，你不会被重定向到stackoverflow.com。这个是因为我们阻止了触发默认点击操作这次使用event.preventDefault（）方法。

示例5：

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

例：

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

将会看到所有三个例子。

内联返回false。

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

何时使用PreventDefault（）vs Return false？

1 个答案: