JavaScript preventDefault()

admin發表於2018-11-06
JavaScript

此方法可以阻止事件的預設動作，它的名稱也體現了這一點。

preventDefault由prevent和default合成，prevent表示"阻止"，default則表示"預設"或"預設"。

預設動作，就是一個事件觸發後瀏覽器預設動作行為。

比如點選超連結會出現跳轉動作，這個跳轉動作就是連結click事件的預設行為。

此方法符合W3C標準。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
event.preventDefault()

瀏覽器支援:

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項：

[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 olink = document.getElementById("ant");
  olink.onclick = function (ev) { 
    ev.preventDefault(); 
  } 
} 
</script> 
</head> 
<body> 
  <div><a href="http://www.softwhy.com" id="ant">螞蟻部落一</a></div> 
  <div><a href="http://www.softwhy.com">螞蟻部落二</a></div> 
</body> 
</html>

上述程式碼當點選第一個連結不會出現跳轉行為，原因分析如下：

（1）.為第一個連結註冊click事件處理函式。

（2）.點選第一個連結原本會發生兩件事情，執行事件處理函式，然後連結跳轉，但是由於時間處理函式中呼叫了preventDefault方法，會阻止預設動作，所以不會出現跳轉現象。此方法低版本IE瀏覽器不支援，如果有相容低版本IE的需求，可以進行如下改造。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
if (e && e.preventDefault) {
  e.preventDefault();
}else{ 
  window.event.returnValue = false;
}

上述程式碼片段實現了相容所有主流瀏覽器的功能，很簡單不多介紹。

preventDefault方法與return false:

大家知道return false也具有阻止預設動作的功能。

關於return false更多內容可以參閱JavaScript return false一章節。

那麼為什麼還要單獨設計一個preventDefault方法，豈不是多此一舉。

兩者還是有不小區別，有時候return false不能完成阻止預設動作的功能，只能preventDefault出手。

具體區別可以參閱preventDefault與return false區別一章節。

相關文章