JS 連結要保留但是又希望點了沒有反應要如何做?

 

 

在 JavaScript 中，如果希望保留 <a> 連結的外觀與功能（如可點擊的樣式），但又希望點擊後不進行任何實際操作（即不導航到其他頁面或 URL），可以使用以下方法來阻止預設行為。

方法 1：使用 event.preventDefault()

可以為 <a> 標籤添加一個事件處理器，並使用 event.preventDefault() 阻止預設的點擊行為。

範例：

 

<a href="https://example.com" id="myLink">這是連結</a>

<script>
  // 取得連結元素
  const link = document.getElementById('myLink');

  // 為連結綁定點擊事件
  link.addEventListener('click', function(event) {
    // 阻止預設行為，即不導航
    event.preventDefault();
    // 你也可以在這裡執行其他操作，如顯示提示等
    console.log('連結被點擊，但不會跳轉');
  });
</script>

在此範例中，event.preventDefault() 阻止了瀏覽器進行跳轉，讓點擊後不會發生任何導航操作。

方法 2：將 href 設為 #

如果不需要將 href 設為具體 URL，可以將其設為 #，然後再阻止頁面跳轉。這對於單頁應用（SPA）或者只需要點擊事件的情況也非常有用。

範例：

<a href="#" id="myLink">這是連結</a>

<script>
  const link = document.getElementById('myLink');
  link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('這個連結的預設行為被阻止，頁面不會跳轉');
  });
</script>

這樣，點擊後不會導致頁面跳轉到 # 或其他 URL。

方法 3：使用 javascript:void(0)

這是一個常見的寫法，用來確保點擊後不會跳轉。

範例：

<a href="javascript:void(0);" id="myLink">這是連結</a>

<script>
  const link = document.getElementById('myLink');
  link.addEventListener('click', function() {
    console.log('這個連結的預設行為被阻止，頁面不會跳轉');
  });
</script>

javascript:void(0) 會防止頁面跳轉，並且不會觸發任何頁面重新加載。

小結

  • event.preventDefault() 是最常見的方式，用來阻止 <a> 標籤的預設跳轉行為。
  • 可以將 href 設為 # 或 javascript:void(0)，以確保點擊後頁面不跳轉，但仍然保留 <a> 標籤的點擊效果。

選擇哪種方法取決於你的需求，event.preventDefault() 提供更靈活的控制，而 # 和 javascript:void(0) 更簡單直觀。