首先，在 JavaScript 的事件模型中，您会遇到一个称为事件冒泡的概念（它使事件从子元素传播到父元素）。为了避免这种冒泡效应，许多开发人员使用了一种名为 的事件方法stopPropagation( )。或者，开发人员已经开始使用
return false语句来阻止这种传播。现在，还有另一个术语称为
preventDefault( )。顾名思义，此方法可防止触发元素的任何默认行为。最佳用例是防止锚标签打开链接。
您可能会遇到这样一种情况，您希望阻止锚标记打开链接（默认行为）以及阻止事件上升到父级。在这种情况下，您可以在一行中完成，而不是编写两行代码，即；return false
返回假；
return false; 当你调用它时，它会做 3 件不同的事情：
event.preventDefault() – 它停止浏览器的默认行为。event.stopPropagation() – 它可以防止事件传播（或“冒泡”）DOM。请注意，此行为与普通（非 jQuery）事件处理程序不同，在普通（非 jQuery）事件处理程序中，值得注意的是，return false它不会阻止事件冒泡。
防止默认（）；
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' 替换为文本“阻止的单击事件”，您将不会被重定向到 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 Clicked 这次。这是因为我们使用 event.stopPropagation() 方法阻止了传播到父 div。接下来，您将看到超链接“单击此处访问 stackoverflow.com”被文本“将要执行单击事件”替换，并且您将立即被重定向到 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。接下来，您将看到“单击此处访问 stackoverflow.com”的超链接被文本“阻止的单击事件”替换，并且您不会被重定向到 stackoverflow.com。这是因为我们使用 event.preventDefault() 方法阻止了这次触发默认点击操作。
示例 5：
对于 return false，我有三个示例，它们似乎都在做完全相同的事情（只是返回 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><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><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 文件中执行所有这些示例，看看它们是如何工作的。