返回false;

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

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

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


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


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

1. event.preventDefault() – It stops the browsers default behaviour.
2. event.stopPropagation() – It prevents the event from propagating (or "bubbling up") the DOM.
3. 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://***.com' onclick='executeChild()'>Click here to visit ***.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

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

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

Run the above code you will see the hyperlink ‘Click here to visit ***.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 ***.com.

示例2：

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

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

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

Run the above code you will see the hyperlink ‘Click here to visit ***.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 ***.com‘ replaced by the text ‘Click event prevented‘ and you will not be redirected to ***.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://***.com' onclick='executeChild()'>Click here to visit ***.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。接下来，您将看到
超链接'点击此处访问***.com'替换为文本
'Click事件将被执行'并立即将
重定向到***.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 ***.com‘ replaced by the text ‘Click event is going to be executed‘ and immediately you will be redirected to ***.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://***.com' onclick='executeChild()'>Click here to visit ***.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 ***.com'替换为文本'Click event
prevent'，您将不会被重定向到***.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 ***.com‘ replaced by the text ‘Click event prevented‘ and you will not be redirected to ***.com. This is because we have prevented the default click action from triggering this time using event.preventDefault() method.

示例5：

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

个案：

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


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


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

1. 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.
2. 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.
3. Returning false from a regular DOM event handler does absolutely nothing.

将看到所有三个例子。

1. 内联返回false。

<div onclick='executeParent()'>
  <a href='http://***.com' onclick='return false'>Click here to visit ***.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 。

1. 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://***.com'>Click here to visit ***.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://***.com' onclick='executeChild()'>Click here to visit ***.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.