何时使用 PreventDefault() vs Return false？

首先，在 JavaScript 的事件模型中，您将看到 一个叫做“事件气泡”的概念 (使一个事件从子传播 元素转换为父元素)。为了避免 这种泡沫效应，很多开发商 使用名为 stopPropagation( )的事件方法。 或者，开发人员已经开始使用 return false语句来停止这种传播。 现在，还有另一个术语叫做 顾名思义，这个 方法的默认行为 元素来触发。最好的用例是防止 打开链接的锚标记。

你可能会遇到这样的情况 想要防止锚标签从 打开链接(默认行为)以及停止 事件从上到父母。 在这种情况下，与其编写两行代码, 你可以在单行中完成它，也就是 return false

55232 次浏览
小开

返回虚假;

当你调用 return false;时，它会做三件不同的事情:

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

请注意，这种行为不同于普通(非 jQuery)事件处理程序，其中值得注意的是，return false不会阻止事件冒泡。

预防违约() ;

preventDefault();只做一件事: 停止浏览器的默认行为。

何时使用？

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

例子:

让我们通过例子来理解:

我们将看到纯 JAVASCRIPT 示例

例子一:

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

运行上面的代码，你会看到超链接 < strong >’点击这里访问 Stackoverflow.com’ 现在如果你首先点击那个链接，你会得到 下一步你会得到 javascript 警告 Div 点击了，你将立即被重定向到 Stackoverflow.com.

例二:

<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 警告 Div 点击了接下来你会看到超链接’点击这里到 访问 stackoverflow.com’替换为文本’阻止点击事件’ 你会被转移到 stackoverflow.com。这是由于我们用于防止默认单击的 event.proventDefault ()方法的 > 要触发的行动。

例三:

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

这一次，如果单击 Link，函数 ExecuteParent ()将不会 被调用时，您将不会收到 javascript 警报 Div 点击了 这是由于我们已经阻止了传播到 使用 event.stop 繁殖()方法进行父 div 超连结「按此浏览 stackoverflow.com 」已被文字取代 点击事件将被执行，你将立即 重定向到 stackoverflow.com 这是因为我们没有阻止 默认的单击操作，这次使用 方法。

例子四:

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

如果单击 Link，函数 ExecuteParent ()将不是 你不会收到 javascript 警告，这是因为我们 阻止了对父 div 的传播 方法。接下来您将看到超链接‘ Click 点击此处浏览 stackoverflow.com’被文字’点击事件取代 而且你也不会被重定向到 stackoverflow.com 是因为我们阻止了默认的单击操作触发 这次使用 event.proventDefault ()方法。

例五:

对于返回 false，我有三个例子，它们似乎都在做完全相同的事情(只是返回 false) ，但实际上 结果是完全不同的。下面是实际发生在每个 以上

个案:

  1. 从内联事件处理程序返回 假的会阻止浏览器导航到链接地址，但是它不会阻止事件通过 DOM 传播。
  2. 从 jQuery 事件处理程序返回 假的将阻止浏览器导航到链接地址，并阻止事件通过 DOM 传播。
  3. 从常规 DOM 事件处理程序返回 假的完全不起作用。

将看到所有三个例子。

  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 事件处理程序返回 假的。

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


提交答案