我們在撰寫前端畫面時,常常會使用 return false 來終止函數運行,其實return false 會包含以下三種行為:

  1. event.preventDefault()
  2. event.stopPropagation()
  3. 停止函數並回傳

第三點應該大家都知道,畢竟寫 return false 就是為了這件事情呀,但是大家不知道其實JavaScript 默默幫我做了1跟2,結果可是差很多的呢!

描述一下這兩個的差異:

event.preventDefault()

就是終止預設行為(Stop Event Flow);以「超連結」為例,瀏覽器看到頁面上有超連結,只要偵測到超連結被點擊到,隨即會幫我做「導向連結」的動作,「導向連結」即是超連結的預設行為。

如下,我對hyper註冊了一個Click 事件,並且使用了event.preventDefault(),此時hyper就不再為我們進行導頁的動作,因為我們已經停止了他的預設行為。

  • <a id=“hyper" href=https://dotblogs.com.tw/harry">Harry’s Tech World!–a>
  • <script type=“text/javascript">
  • $(“#hyper").click(function() {
  • //終止預設行為
  • event.preventDefault();
  • });
  • !–script>

event.stopPropagation()

這個比較難懂一點,這個語法是用來終止事件傳導,直接舉個例子來看比較好懂。

<div id=“div1″>

<a id=“hyper" href=https://dotblogs.com.tw/harry">Harry’s Tech World!–a>

!–div>

<script type=“text/javascript">

$(“#hyper").click(function() {

//終止預設行為

event.preventDefault();

console.log(“hyper click");

});

$(“#div1″).click(function() {

console.log(“div1 click");

});

!–script>

如上圖,我們點擊超連結的時候,console 顯示訊息的順序為「hyper click」>「div1 click」,

這個結果很合理,原因是因為我們點擊超連結後browser先幫我們執行了hyper所註冊的Click 事件,

接著因為我們的hyper被包在div 裡面,進而div所註冊的事件就被「傳導」到了hyper上,

所以當我們點擊了hyper的同時不只自己本身的Click事件被觸發,連同div 所註冊的事件也會被觸發,這個結果就是所謂的事件傳導。

當然若我們不希望有這個結果,只要加入event.stopPropagation()就不會有事件傳導的結果囉,如下:

<div id=“div1″>

<a id=“hyper" href=https://dotblogs.com.tw/harry">Harry’s Tech World!–a>

!–div>

<script type=“text/javascript">

$(“#hyper").click(function() {

//終止預設行為

event.preventDefault();

//終止事件傳導

event.stopPropagation();

console.log(“hyper click");

});

$(“#div1″).click(function() {

console.log(“div1 click");

});

!–script>

所以在使用者兩個方法上,要再多加注意唷!

本文也發表於Harry’s Tech World

廣告