碎碎念

轉自 https://dotblogs.com.tw/harry/2016/09/10/131956

--

描述一下這兩個的差異：

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>

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

--