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

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

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

（一）preventDefault方法

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

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

在上面的代碼中，點(diǎn)擊鏈接時(shí)不會(huì)跳轉(zhuǎn)到百度，因?yàn)?code>preventDefault方法阻止了鏈接的默認(rèn)跳轉(zhuǎn)行為。

（二）returnValue屬性

returnValue屬性是event對(duì)象上的一個(gè)可讀寫屬性，默認(rèn)值為true。將其設(shè)置為false可以取消事件的默認(rèn)行為。這種方法最早在IE中實(shí)現(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中可以同時(shí)阻止默認(rèn)行為和事件冒泡。

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

（四）defaultPrevented屬性

defaultPrevented屬性用于檢查默認(rèn)行為是否已被阻止。它返回一個(gè)布爾值，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;
};

在上面的代碼中，點(diǎn)擊鏈接時(shí)會(huì)阻止默認(rèn)行為，并將defaultPrevented的值顯示在頁(yè)面上。

（五）cancelable 屬性

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

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

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

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

在上面的代碼中，我們?yōu)?a 元素綁定了一個(gè)點(diǎn)擊事件，點(diǎn)擊之后通過(guò) event 對(duì)象的 cancelable 屬性來(lái)查看該元素的默認(rèn)行為是否能阻止。

三、總結(jié)

在實(shí)際開(kāi)發(fā)中，建議優(yōu)先使用preventDefault，因?yàn)樗亲顦?biāo)準(zhǔn)和兼容性最好的方法。希望本文能幫助你更好地理解和應(yīng)用這些方法。

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

最新評(píng)論