何时使用PreventDefault()vs Return false？

Question

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

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

Answer 1

返回false;

return false; 当你打电话时,你会做3件事:

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>

2. 从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>

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