在JavaScript事件處理中，爲什麼「返回false」或「event.preventDefault（）」和「停止事件流」會有所作爲？

Question

據說，當我們處理「點擊事件」，返回false或者調用event.preventDefault（）有差別，其中

不同的是，的preventDefault 只會阻止默認事件 行動發生，即頁面重定向 上的鏈接點擊，表單提交， 等，並返回false也會停止 事件流。

這是否意味着，如果點擊事件被註冊多次採取若干行動，使用

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

返回false將停止運行其他的處​​理程序？

我現在在Mac上，所以只能使用Firefox和Chrome，但不能使用具有不同事件模型的IE，並且通過添加3個處理程序在FF和Chrome上測試它，並且所有3個處理程序都不會停止運行。 。所以真正的區別是什麼，或者，是否存在「停止事件流」不可取的情況？

這是關係到

Using jQuery's animate(), if the clicked on element is "<a href="#" ...> </a>", the function should still return false?

和

What's the difference between e.preventDefault(); and return 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 
});​ 

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

Answer 2

寫return false或e.preventDefault()不會阻止其他處理程序運行。

相反，它們會阻止瀏覽器的默認響應，例如導航到鏈接。

在jQuery中，您可以編寫e.stopImmediatePropagation()以防止其他處理程序運行。

Answer 3

這並不完全回答你的問題，但有一天，我使用YUI的e.preventDefault()的<a>元素壓制該href行動，我只是想在JavaScript的onclick事件有控制（除非沒有JS檢測）。在這種情況下，停止整個事件鏈不會影響我。前

不過幾天，我有嵌套在<label>元素中的<input type="checkbox">，我不得不使用條件在事件處理程序，以確定是否被點擊的目標是一個標籤，既不e.preventDefault()也不e.stopEvent()停在我的「點擊'（legitimately）事件觸發兩次（IE6除外）。

本來不錯的是可以壓縮整個相關事件鏈，因爲我已經嘗試過傳播和return false ;，但是我總是會因爲我的標籤元素而得到第二個事件。

---

編輯：我不介意jquery如何處理我的雙重事件情況，如果有人熱衷於評論這件事。

Answer 4

有時候事件監聽器想要取消事件的副作用感興趣。想象一下你希望只允許數字的文本框。由於文本框可以接受任何事情，因此有必要告訴瀏覽器忽略鍵入的非數字。這是通過監聽關鍵事件並在錯誤鍵被鍵入時返回false來實現的。

Answer 5

return false和preventDefault()是否存在以防止瀏覽器與某個事件相關聯的默認操作（例如，點擊時鏈接下面的鏈接）。有三種不同的方法可以實現這一點：

1.使用addEventListener()（非IE瀏覽器）添加的事件處理程序。在這種情況下，請使用Event對象的preventDefault()方法。其他的事件處理程序仍然會被調用。使用attachEvent()（IE）

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

2.一種事件處理程序添加。在這種情況下，請將window.event的returnValue屬性設置爲true。該事件的其他處理程序仍將被調用，並且也可能會更改此屬性。

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

3.一種事件處理程序使用屬性或事件處理程序屬性加入。

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

或

button.onclick = handleEvent; 

在這種情況下，return false將做的工作。通過addEventListener()或attachEvent()添加的任何其他事件處理程序仍將被調用。

function handleEvent() { 
    return false; 
}