原生JS事件中，return false 和 preventDefault() 的區別

前幾天有同學問我，如果在頁面上禁止右鍵。一聽到這個，我的第一個想法就是右鍵彈出來的菜單應該是瀏覽器的默認事件，是不是可以根據按鍵的類型來判斷是點擊了右鍵，然后靜止默認事件來做。

document.addEventListener('click', function(event) {
	if (event.button == 2) {
		event.preventDefault();
	}
}, false);

當時，我就是這么做的，但是很快的發現，完成不是這么回事。

想要禁止右鍵，是有自己的一個事件，叫做oncontextmenu。在《Javascript權威指南》這本書上是這么介紹這個事件的可以取消的事件，當上下文菜單即將出現時觸發。當前瀏覽器在鼠標右擊時顯示上下文菜單，所以這個事件也可以像click事件那樣使用。

So，我當時就直接問了方便，直接就用屬性來綁定了事件

document.oncontextmenu = function(event) {
    event.preventDefault();
}

然后，發現這么做是完全沒有效果的。很納悶，后面就用了

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
}, false);

這么做之后，發現就ok了。

這個時候，就在想，為什么之前直接用屬性綁定事件是不行的。后面我把代碼改成了

document.oncontextmenu = function(event) {
    return false;
}

這個時候，也是可以了。然后就再想，這個return false 和 event.preventDefault()有什么去唄。去google一搜，全都是說return false = event.preventDefault() + stop.stopPropagation()。我去嘗試了一下，發現完全不是這么回事。再仔細一看，那幫人問的是在jquery的情況下是怎么樣的。然后我繼續搜，發現都在講jquery。

最后我找了權威指南的書仔細看了下，發現了答案。

事件處理程序的返回值只對通過屬性注冊的處理程序才有意義。也就是說如果我們是直接不通過addEventListener()函數來綁定事件的話，我們要禁止默認事件的話，用的就是return false。

但是如果我們要用addEventListener()或者attachEvent()來綁定的話，就要用preventDefault()方法或者設置事件對象的returnValue屬性。