怎樣用純CSS實現禁止滑鼠點選事件？

王铁柱6發表於2024-11-29
CSS事件

在純 CSS 中，您可以使用 pointer-events: none; 來禁止滑鼠點選事件。 這個屬性會禁用元素上的所有滑鼠事件，包括點選、懸停和其他滑鼠互動。

.disabled-element {
  pointer-events: none;
}

將這個類新增到您想要禁用點選事件的 HTML 元素上即可。

一些需要注意的點：

  • 子元素繼承： 如果父元素設定了 pointer-events: none;，那麼它的所有子元素也將繼承這個屬性，並變得無法點選。 如果您希望子元素仍然可以點選，需要在子元素上明確地設定 pointer-events: auto; 來恢復滑鼠事件。

  • JavaScript 互動： pointer-events: none; 只禁用滑鼠事件。 JavaScript 事件監聽器（例如 addEventListener('click', ...)）仍然可以被觸發。 如果您需要完全禁用元素的互動，包括 JavaScript 事件，您需要在 JavaScript 程式碼中進行處理，例如移除事件監聽器或阻止事件傳播。

  • 鍵盤導航： pointer-events: none; 不會禁用鍵盤導航。 如果您需要禁用鍵盤導航，可以使用 tabindex="-1" 屬性。

  • a 標籤: 對於 <a> 標籤，即使設定了 pointer-events: none;，預設情況下仍然可以透過鍵盤的 Tab 鍵選中並回車訪問連結。為了完全禁用 <a> 標籤，除了 pointer-events: none; 外，還需要設定 disabled 屬性或使用 JavaScript 阻止預設行為。

示例：

<div class="disabled-element">
  This div cannot be clicked.
  <button>This button also cannot be clicked.</button>
  <div class="enabled-element">
    But this div can be clicked.
  </div>
</div>

<style>
.disabled-element {
  pointer-events: none;
}

.enabled-element {
  pointer-events: auto;
}
</style>

在這個例子中，外部的 div 和它包含的 button 都無法被點選，但是內部的帶有 enabled-element 類的 div 仍然可以點選。

更全面的禁用方案 (JavaScript 輔助):

如果需要更全面的禁用，建議結合 CSS 和 JavaScript：

const element = document.querySelector('.disabled-element');

element.style.pointerEvents = 'none'; // 禁用滑鼠事件
element.setAttribute('tabindex', '-1'); // 禁用鍵盤焦點
element.addEventListener('click', (event) => {
  event.preventDefault(); // 阻止任何點選事件
});

這種方法可以更全面地禁用元素的互動。

相關文章