关于jquery：在JavaScript事件处理中，为什么“return false”或“event.preventDefault（）”和“停止事件流”会有所不同？

In JavaScript event handling, why “return false” or “event.preventDefault()” and “stopping the event flow” will make a difference?

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

the difference is that preventDefault
will only prevent the default event
action to occur, i.e. a page redirect
on a link click, a form submission,
etc. and return false will also stop
the event flow.

这是否意味着，如果对多个操作多次注册Click事件，则使用

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

返回false将阻止其他处理程序运行？

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

这与

使用jquery的animate()，如果单击的元素为""，函数仍应返回false？

和

e.preventDefault()；和返回false有什么区别？

相关讨论

希望这段代码能解释给你…

HTML

1
2
3

click me
click me
?

JQuery

1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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

演示

或

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

$('a.a1').click(function(){
alert('I am from ');
return false;
});

$('a.a2').click(function(e){
alert('I am from ');
e.preventDefault();
});?

演示2

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

相反，它们将阻止浏览器的默认反应，例如导航到链接。

在jquery中，可以编写e.stopImmediatePropagation()以防止其他处理程序运行。

return false和preventDefault()用于防止浏览器与事件相关联的默认操作(例如，单击链接后)。对于三种不同的场景中的每一种，都有一种不同的方法来实现这一点：

1。使用addEventListener()添加的事件处理程序(非IE浏览器)。在这种情况下，使用Event对象的preventDefault()方法。仍将调用事件的其他处理程序。

1
2
3

function handleEvent(evt) {
evt.preventDefault();
}

2。使用attachEvent()添加的事件处理程序。在这种情况下，将window.event的returnValue属性设置为true。仍将调用事件的其他处理程序，也可能更改此属性。

1
2
3

function handleEvent() {
window.event.returnValue = false;
}

三。使用属性或事件处理程序属性添加的事件处理程序。

1	<input type="button" value="Do stuff!" onclick="return handleEvent(event)">

或

1	button.onclick = handleEvent;

在这种情况下，return false将完成这项工作。通过addEventListener()或attachEvent()添加的任何其他事件处理程序仍将被调用。

1
2
3

function handleEvent() {
return false;
}

有时，事件监听器想要取消事件的副作用，这是有兴趣的。想象一下一个文本框，您希望它只允许数字。因为文本框可以接受任何东西，所以有必要告诉浏览器忽略输入的非数字。这是通过侦听密钥事件来实现的，如果键入了错误的密钥，则返回false。

这并不能完全回答你的问题，但前几天我用yui的e.preventDefault()在元素上压扁href操作，因为我只希望javascript onclick事件具有控制权(除非没有检测到JS)。在这种情况下，停止整个事件链不会影响我。

但是在那之前的几天，我有一个嵌套在元素中，并且我必须在事件处理程序中使用条件来确定单击的目标是否是标签，因为e.preventDefault()和e.stopEvent()都没有阻止我的"单击"事件(合法地)触发两次(IE6除外)。

最好的是能够压扁整个相关事件链，因为我已经尝试了传播和return false ;，但由于label元素的存在，我总是会得到第二个事件。

编辑：我不介意知道jquery如何处理我的双重事件情况，如果有人愿意对此发表评论的话。