一、什么是默認(rèn)行為？

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

二、阻止默認(rèn)行為的方法

（一）preventDefault方法

preventDefault方法是DOM中最常見且標(biāo)準(zhǔn)的阻止默認(rèn)行為的方式。它可以直接調(diào)用，無需返回值。

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

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

（二）returnValue屬性

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

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

（三）return false

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

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

（四）defaultPrevented屬性

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

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

在上面的代碼中，點擊鏈接時會阻止默認(rèn)行為，并將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 屬性來查看該元素的默認(rèn)行為是否能阻止。

三、總結(jié)

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

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

最新評論