preventDefault()與return false區別

admin發表於2018-10-29
False

關於兩者的具體用法可以參閱如下兩篇文章：

（1）.JavaScript return 語句一章節。

（2）.JavaScript preventDefault()一章節。

preventDefault是一個方法，return false是函式返回值。

兩者之間的區別是十分明顯的，甚至可以說從直覺上兩者功能並無任何相同之處。

但是它們卻有一個共同之處，都能夠阻止事件的預設行為。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div { 
  width:150px; 
  height:30px; 
  line-height:30px; 
  margin:0px auto; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function() { 
  let one = document.getElementById("one");
  let two = document.getElementById("two");
  one.onclick = function (ev) { 
    ev.preventDefault(); 
  } 
  two.onclick = function (ev) { 
    return false;
  } 
} 
</script> 
</head> 
<body> 
  <div><a href="http://www.softwhy.com" id="one">螞蟻部落一</a></div> 
  <div><a href="http://www.softwhy.com" id="two">螞蟻部落二</a></div> 
</body> 
</html>

點選連結會出現連結跳轉動作，這個跳轉動作對連結<a>元素來說就是click事件預設行為。

上述程式碼中，點選連結都不能實現連結的跳轉行為，可見兩種方式都可以阻止預設行為。

僅從上面例子看，在阻止預設行為方面是完全一致的，但是兩者還是有區別的。

特別說明：本文介紹的是原生JavaScript中preventDefault方法與return false之間的區別。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div { 
  width:150px; 
  height:30px; 
  line-height:30px; 
  margin:0px auto; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function() { 
  let one = document.getElementById("one");
  let two = document.getElementById("two");
  one.addEventListener('click', function(event) {
    return false;
  }, false);
  two.onclick = function (ev) { 
    return false;
  } 
} 
</script> 
</head> 
<body> 
  <div><a href="http://www.softwhy.com" id="one">螞蟻部落一</a></div> 
  <div><a href="http://www.softwhy.com" id="two">螞蟻部落二</a></div> 
</body> 
</html>

程式碼分析如下：

（1）.第一個連結使用addEventListener方式註冊click事件處理函式。

（2）.第二個連結使用屬性方式註冊事件處理函式。

（3）.在第一種方式中，return false阻止預設行為的功能失效，但是第二種方式依然有效。

（4）.如果將第一種方式中的return false替換為ev.preventDefault()可以實現阻止預設行為的功能。

總結如下：

（1）.如果不考慮瀏覽器相容問題，preventDefault方法阻止預設行為專業且全面的，return false乾的是副業。

（2）.return false在addEventListener註冊的事件處理函式中無法阻止事件預設行為，畢竟它不是專業的。

最後再強調一下，上述總結的區別一定是在原生JavaScript中，有些封裝庫或者外掛修改了這一行為。

相關文章