默認(rèn)行為

在JavaScript中，事件默認(rèn)行為是指在特定的事件發(fā)生時瀏覽器自動執(zhí)行的操作。例如，當(dāng)用戶單擊一個鏈接時，瀏覽器會自動跳轉(zhuǎn)到鏈接的URL頁面；form 元素 的 action 屬性值表單內(nèi)容要提交的地址，而用戶點(diǎn)擊表單元素中嵌套的提交按鈕時，就會有一個默認(rèn)的提交操作。

而有時候，不需要這些默認(rèn)行為。比如，我們提交表單希望ajax 異步發(fā)送到服務(wù)器，不需要form 的默認(rèn)事件提交跳轉(zhuǎn)行為。

一句話說就是 html 元素自帶的行為。

阻止默認(rèn)行為

1. 使用event.preventDefault()方法：

這是阻止事件默認(rèn)行為最常用的方法之一。當(dāng)事件被觸發(fā)時，可以調(diào)用event.preventDefault()方法來阻止瀏覽器執(zhí)行其默認(rèn)行為。例如，在單擊鏈接時，可以通過以下方式阻止瀏覽器跳轉(zhuǎn)到鏈接的URL頁面：

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
});

2. 使用return false：

在某些情況下，可以在事件處理程序中使用return false來阻止事件默認(rèn)行為。這種方式通常用于內(nèi)聯(lián)事件處理程序，例如onclick屬性。例如，以下代碼將阻止單擊鏈接時的默認(rèn)行為：

注意：如果寫在 jQuery 中，能夠同時阻止默認(rèn)行為和阻止冒泡。

<a href="#" rel="external nofollow"  onclick="return false;">點(diǎn)擊我不會跳轉(zhuǎn)</a>

3. 使用event.returnValue屬性：

在舊版本的IE瀏覽器中，可以使用event.returnValue屬性來阻止事件默認(rèn)行為（現(xiàn)在很多瀏覽器也支持）。將event.returnValue設(shè)置為false可以阻止默認(rèn)行為的執(zhí)行。例如：

document.querySelector('a').attachEvent('onclick', function(event) {
  event.returnValue = false;
});

4. 使用event.stopPropagation()方法（僅阻止事件傳播）：

阻止事件傳播。 event.stopPropagation()方法用于阻止事件的進(jìn)一步傳播，而不是直接阻止事件的默認(rèn)行為。它可以用于停止事件冒泡到父元素或其他事件監(jiān)聽器。例如：

document.querySelector('.child').addEventListener('click', function(event) {
  event.stopPropagation();
});

5. 使用 cancelable 屬性

查看狀態(tài)。 該屬性表示事件是否可以取消，返回一個布爾值。該屬性是只讀屬性。true 表示可以取消。

<a id="test"  rel="external nofollow"  rel="external nofollow" >百度</a>
<script>
    let test = document.getElementById('test');
    test.onclick = function (e) {
        // 可以取消事件的默認(rèn)行為
        console.log(e.cancelable)
    }
</script>

6. defaultPrevented 方法

查看狀態(tài)。 也是 event的一個屬性，表示默認(rèn)行為是否被阻止，true 表示被阻止。

<a id="test"  rel="external nofollow"  rel="external nofollow" >百度</a>
<script>
    let test = document.getElementById('test');
    test.onclick = function (e) {
        e.preventDefault()
        console.log(e.defaultPrevented)  // true
    }
</script>

需要注意的是，不同的事件有不同的默認(rèn)行為，因此阻止默認(rèn)行為的方法可能會有所不同。一些常見的事件默認(rèn)行為包括表單提交、鏈接點(diǎn)擊、表單元素的鍵盤輸入等。

總結(jié)起來，使用event.preventDefault()方法是最常見和推薦的阻止事件默認(rèn)行為的方法。其他方法如return false和event.returnValue屬性在特定情況下可能有用，但不如event.preventDefault()方法靈活和通用。另外，event.stopPropagation()方法用于阻止事件傳播，而不是直接阻止事件的默認(rèn)行為。

事件冒泡

事件冒泡是指當(dāng)?個?元素觸發(fā)了某個事件后，事件會?直冒泡到它的?元素，直到到達(dá)?檔根節(jié)點(diǎn)。

阻止事件冒泡

event.stopPropagation()

document.getElementById("child").addEventListener("click", function (event) {
  // 阻?事件冒泡
  event.stopPropagation();
});

總結(jié) 

到此這篇關(guān)于JavaScript阻止事件冒泡和默認(rèn)行為的文章就介紹到這了,更多相關(guān)JS阻止事件冒泡和默認(rèn)行為內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論