在javascript事件处理中,为什么“return false”或“event.preventDefault()”和“stopping the event flow”会有区别?

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

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
});​

demo

或

$('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();
});​

demo 2

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

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

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

return false 和 preventDefault() 是否存在阻止浏览器与事件关联的默认操作(例如,单击链接时跟踪链接)。对于三种不同的场景中的每一种,都有一种不同的方法来实现这一点:

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

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

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

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

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

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

或

button.onclick = handleEvent;

在这种情况下, 返回假 会完成任务的。通过添加的任何其他事件处理程序 添加事件侦听器() 或 附件事件() 仍将被调用。

function handleEvent() {
    return false;
}

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

这并不能完全回答你的问题,但前几天我用的是 e.preventDefault() 关于一个 <a> 要挤压的元素 href 操作,因为我只想要JavaScript onclick 要控制的事件(除非未检测到JS)。在这种情况下,停止整个事件链不会影响我。

但几天前,我 <input type="checkbox"> 嵌套在一个 <label> 元素,我必须在事件处理程序中使用条件来确定单击的目标是否是标签,因为两者都不是 e.预防性违约() 也不 e.stopEvent() 已从停止我的“单击”事件( legitimately )触发两次(IE6除外)。

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

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