[Javascript] preventDefault vs stopPropagation vs return false

網路上眾多文章上或者解答
像是這篇，很清楚地讓我理解結論：

1
2
3
4
5
6
7
8
9
10

function() {
  return false;
}

// IS EQUAL TO

function(event) {
  event.preventDefault();
  event.stopPropagation();
}

但是你確定真的是這樣引用嗎？
還有你真的用過嗎？

一些觀念紀錄
首先e.preventDefault(); e.stopPropagation是原生javascript的用法
而在Jquery 文件上也可以找到，是因為這是被Jquery沿用下去的
補筆記，網紅組長：在MDN - Mozilla Developer Network上找到的都不會是Query文件

Event.preventDefault()
我們以下簡稱pd

Event.stopPropagation()
我們以下簡稱sp

介紹一下addEventListener

1

document.addEventListener(event, function, useCapture)

第一個參數是監聽的種類：click,load
第二個參數是監聽的function
第三個參數是布零值：true or false

補充知識：
而第三個參數
如果是false，那就會使用bubbling，他是從內而外的流程
如果是true，那就是capture，和bubbling相反是由外而內的click事件

不引用Jquery下 ，return false的應用

點以下範例連結時，記得再 run js 一次！

DOM0 handlers :

1

<div onclick="return functionName();">

文章範例
這邊一定要加return+ functionName();
可以看到執行了pd但是沒有sp
我的改編範例

DOM0 handlers (again) :

1

document.getElementById("someId").onclick = functionName;

文章範例
這裡也是執行了pd但是沒有sp

DOM2 handlers :

1

document.getElementById("someId").addEventListener("click", functionName, false);

文章範例
這裡則是沒執行pd也沒執行sp！
所以代表著return false 也沒法達到所謂的pd和sp！？
豈不是跟困惑者我們一開始理解的？

引用Jquery下的，return false應用

當然不是的！其實很多文章都有解釋著這一段
在jQuery 的fn裡面用到eturn false 是可做到pd和sp的！

1
2
3

$('a').click(function () {
    return false;
});

我用第三個範例來改編
我改編的範例

可以很明顯地說著我們一開始的程式碼，其實並沒有解釋很清楚
應該是

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

// Jquery 底下我們使用return false 即終止目前的fn運行
$('a').click(function () {
    return false;
});

is equal to
所以任何 function上，我們在裡面給他event參數
並且使用js的原生fn

function(event) {
  event.preventDefault();
  event.stopPropagation();
}

結論

我做個總結
Jquery 的 fn 底下做 return false;
是可以達到的以上 pd 的 sp
但是當我們在原生 fn 上呢？
建議不要在那邊嘗試 return 來 return 去了
你就直接使用

1
2

event.preventDefault();
event.stopPropagation();

省去不必要的麻煩！

過程有個神奇的問題

在這邊給個問題，沒給event參數會怎樣呢？
可以執行 event.preventDefault();????
可以去上面三個範例中 console.log(event) 看看喔!！會有所成長

文章參考：

http://blog.niftysnippets.org/2011/11/story-on-return-false.html
http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false

這篇這位發問者其實他是先走過，覺得神奇才來問，就滿有趣的
所以，第二位回覆說了一句
Your code makes no sense, maybe because it’s out of context.
然後輸出一段code 告訴著他，正確應該是要呼叫此fn
但是..你沒一步步走過我上面解釋的，或許你還是只知道表層
不知道限定要在Jquery 底下使用return false才會發揮pd和sp

Irvan Smith