a標籤href與onclick之間的碰撞

最近碰到了一個有意思的問題，如果a標籤同時擁有href和onclick，並且onclick也會執行跳轉頁面的功能，那麼到底是跳轉到href提供的連結去，還是根據onclick方法裡面的跳轉邏輯跳轉到對應頁面去呢，說是我自己剛開始也是不確定的，於是開始進行試驗。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.baidu.com">百度一下</a>
  </body>
  <script>
    const list = document.querySelectorAll("a");
    list.forEach((a) => {
      a.addEventListener("click", (e) => {
        console.log("+++++++++");
        window.location.href = "https://www.google.com";
        console.log("----------");
      });
    });
  </script>
</html>

點選百度一下後，發現最終跳轉的地址確實是百度。

那麼改變location.href的語句是沒有執行嗎，其實並不是，可以看下控制檯的列印結果

發現window.location.href = "https://www.google.com"這句是執行了的，那麼為什麼最終跳轉的還是百度呢？我們先看下網路請求。

發現請求google.com之後取消了請求，緊接著請求了百度，請求百度成功後，就跳轉到了百度的頁面。

如果想要href指向的地址失效，只需要在點選事件函式里面加上阻止預設行為的語句就可以。

a.addEventListener("click", (e) => {
  e.preventDefault();
  console.log("+++++++++");
    window.location.href = "https://www.google.com";
  console.log("----------");
});

從上面的試驗結果來看，是onclick方法裡面的邏輯先執行，還是先執行href？

其實結果很明顯，我們發現是先請求的google，然後再請求的百度，由此可以得出先執行onclick中的邏輯的。我們換個方式探究一番

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.baidu.com">百度一下</a>
    <a href="javascript:console.log('=======')">log</a>
  </body>
  <script>
    const list = document.querySelectorAll("a");
    list.forEach((a) => {
      a.addEventListener("click", (e) => {
        console.log("+++++++++");
      });
    });
  </script>
</html>

點選log後，列印結果如下

a標籤href與onclick之間的碰撞

相關文章