默認行為

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

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

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

阻止默認行為

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

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

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

2. 使用return false：

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

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

<a href="#" rel="external nofollow"  onclick="return false;">點擊我不會跳轉</a>

3. 使用event.returnValue屬性：

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

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

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

阻止事件傳播。   event.stopPropagation()方法用于阻止事件的進一步傳播，而不是直接阻止事件的默認行為。它可以用于停止事件冒泡到父元素或其他事件監(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) {
        // 可以取消事件的默認行為
        console.log(e.cancelable)
    }
</script>

6. defaultPrevented 方法

查看狀態(tài)。 也是 event的一個屬性，表示默認行為是否被阻止，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>

需要注意的是，不同的事件有不同的默認行為，因此阻止默認行為的方法可能會有所不同。一些常見的事件默認行為包括表單提交、鏈接點擊、表單元素的鍵盤輸入等。
總結起來，使用event.preventDefault()方法是最常見和推薦的阻止事件默認行為的方法。其他方法如return false和event.returnValue屬性在特定情況下可能有用，但不如event.preventDefault()方法靈活和通用。另外，event.stopPropagation()方法用于阻止事件傳播，而不是直接阻止事件的默認行為。

到此這篇關于JavaScript 阻止事件默認行為的幾種方法的文章就介紹到這了,更多相關JavaScript 阻止默認行為內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論