在JavaScript事件处理中,为什么"return false"或"event.preventDefault()"和"停止事件流"会有所不同？

Question

据说当我们处理"click事件"时,返回false或调用event.preventDefault()会产生影响,其中

不同之处在于,preventDefault只会阻止默认事件操作发生,即链接点击,表单提交等页面重定向,返回false也会阻止事件流.

这是否意味着,如果click事件已针对多个操作多次注册,请使用

$('#clickme').click(function() { … })

return false会阻止其他处理程序运行吗？

我现在在Mac上,所以只能使用Firefox和Chrome,而不是IE,它有不同的事件模型,并通过添加3个处理程序在FF和Chrome上进行测试,并且所有3个处理程序都没有停止运行.... 那么真正的区别是什么,或者,是否存在"阻止事件流动"的情况？

这与...有关

使用jQuery的animate(),如果点击的元素是"<a href="#" ...> </a>",该函数应该仍然返回false？

和

e.preventDefault()之间的区别是什么？并返回false？

Answer 1

希望这段代码可以解释给你...

HTML

<div>
<a href="index.html" class="a1">click me</a>
<a href="index.html" class="a2">click me</a>
</div>?

jQuery的

$('div').click(function(){
    alert('I am from <div>');
});

$('a.a1').click(function(){
    alert('I am from <a>');
    return false; // this will produce one alert
});

$('a.a2').click(function(e){
    alert('I am from <a>');
    e.preventDefault(); // this will produce two alerts
});?

演示

要么

$('div').click(function(){
    alert('I am from <div>');
});

$('a').click(function(){
    alert('I am from <a>');
});

$('a.a1').click(function(){
    alert('I am from <a class="a1">');
    return false;
});

$('a.a2').click(function(e){
    alert('I am from <a class="a2">');
    e.preventDefault();
});?

演示2

Answer 2

写入return false或e.preventDefault()不会阻止其他处理程序运行.

相反,它们会阻止浏览器的默认反应,例如导航到链接.

在jQuery中,您可以编写e.stopImmediatePropagation()以防止其他处理程序运行.