一、什么是默認行為？

默認行為是指HTML元素自帶的行為。例如，點擊一個<a>元素通常會導致頁面跳轉，提交一個<form>元素會導致頁面刷新。這些行為在某些情況下可能不是我們想要的，因此需要阻止它們。

二、阻止默認行為的方法

（一）preventDefault方法

preventDefault方法是DOM中最常見且標準的阻止默認行為的方式。它可以直接調用，無需返回值。

<a id="test" >百度</a>
<script>
var test = document.getElementById("test");
test.onclick = function(event) {
  event.preventDefault();
};
</script>

在上面的代碼中，點擊鏈接時不會跳轉到百度，因為preventDefault方法阻止了鏈接的默認跳轉行為。

（二）returnValue屬性

returnValue屬性是event對象上的一個可讀寫屬性，默認值為true。將其設置為false可以取消事件的默認行為。這種方法最早在IE中實現(xiàn)，但現(xiàn)在大多數(shù)瀏覽器都支持。

var test = document.getElementById("test");
test.onclick = function(event) {
  event.returnValue = false;
};

（三）return false

在事件處理函數(shù)中返回false也可以阻止默認行為。這種方法在原生JavaScript中只能阻止默認行為，但在jQuery中可以同時阻止默認行為和事件冒泡。

var test = document.getElementById("test");
test.onclick = function() {
  return false;
};

（四）defaultPrevented屬性

defaultPrevented屬性用于檢查默認行為是否已被阻止。它返回一個布爾值，true表示默認行為已被阻止，false表示未被阻止。

var test = document.getElementById("test");
test.onclick = function(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
  test.innerHTML = event.defaultPrevented;
};

在上面的代碼中，點擊鏈接時會阻止默認行為，并將defaultPrevented的值顯示在頁面上。

（五）cancelable 屬性

首先要介紹的是 cancelable 屬性，該屬性返回一個布爾值，表示事件是否可以取消。

該屬性為只讀屬性。返回 true 時，表示可以取消。否則，表示不可取消。

<a id="test" >百度</a>

var test = document.getElementById("test");
test.onclick = function (event) {
  test.innerHTML = event.cancelable; // true
}

在上面的代碼中，我們?yōu)?a 元素綁定了一個點擊事件，點擊之后通過 event 對象的 cancelable 屬性來查看該元素的默認行為是否能阻止。

三、總結

在實際開發(fā)中，建議優(yōu)先使用preventDefault，因為它是最標準和兼容性最好的方法。希望本文能幫助你更好地理解和應用這些方法。

以上就是JavaScript阻止事件默認行為的不同方法的詳細內容，更多關于JavaScript阻止事件默認行為的資料請關注腳本之家其它相關文章！

最新評論