event.preventDefault（）和多個事件

Question

在我開始寫大量不工作的代碼之前，我想我會問這個問題。

event.preventDefault()只取消點擊事件的默認動作不是嗎？

理論上我應該可以將jQuery中的多個單擊事件處理程序綁定到給定的目標，以執行不同的操作，如Ajax帖子和Google跟蹤。

我錯了嗎？

Answer 1

event.preventDefault()只取消點擊事件的默認動作不是嗎？

它取消瀏覽器的默認事件（而不僅僅是click事件）（W3C docs，jQuery docs）的作用。因此，例如，以submit事件的形式，它會阻止瀏覽器提交表單。它不會阻止你在代碼中做的任何事情，也不會阻止冒泡;這就是stopPropagation的用途（W3C docs,jQuery docs）。

所以假設您在div中有一個鏈接，並且您在鏈接和div上都掛鉤了click事件。如果鏈接的事件處理程序調用preventDefault，則瀏覽器將不會執行其默認操作（在鏈接之後），但該事件會繼續將DOM向上冒泡到鏈接的父元素div，因此您將看到事件那裏也有你的click處理程序。您在任何處理程序中執行的任何代碼操作都不會受到您致電preventDefault的影響。

在您的評論下面，你問了關於相同元素的多個處理程序。 preventDefault和stopPropagation都不會影響到這些，但它們仍然會被解僱......除非您使用stopImmediatePropagation，它告訴jQuery停止事件在其軌道中死去（但不阻止瀏覽器的默認操作）。

我應該說，如果你從你的事件處理函數返回false，那告訴jQuery阻止默認的和停止冒泡。這就像撥打preventDefault和stopPropagation。當您的事件處理程序正在全面控制事件時，這是一個方便的快捷方式。

因此，鑑於此HTML：

<div id='foo'><a href='http://stackoverflow.com'>Q&amp;A</a></div> 

實施例1：

// Here we're preventing the default but not stopping bubbling, 
// and so the browser won't follow the link, but the div will 
// see the event and the alert will fire. 
$("#foo").click(function() { 
    alert("foo clicked"); 
}); 
$("#foo a").click(function(event) { 
    event.preventDefault(); 
}); 

實施例2：

// Here we're stopping propagation and not preventing the default; 
// the browser will follow the link and the div will not be given 
// a chance to process the event (no alert, and more to the point, 
// code in the div's handler can't prevent the default) 
$("#foo").click(function() { 
    alert("foo clicked"); 
}); 
$("#foo a").click(function(event) { 
    event.stopPropagation(); 
}); 

實施例3（喲日子會把只有很少看到此）：

// Here we're doing both, and so the browser doesn't follow the 
// link and the div doesn't see the event (no alert). 
$("#foo").click(function() { 
    alert("foo clicked"); 
}); 
$("#foo a").click(function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

實施例4：

// Shorter version of Example 3, exactly the same effect 
$("#foo").click(function() { 
    alert("foo clicked"); 
}); 
$("#foo a").click(function() { 
    return false; 
});