CSS如何設定不可點選？CSS如何設定不可點選的實現方法

佚名發表於2022-05-11
CSS

可以透過設定元素的pointer-events屬性設定為none，來實現元素不可點選。

此方法是透過設定元素的滑鼠事件失效來實現元素不可點選。

pointer-events: none;

css pointer-events 屬性定義元素是否對指標事件做出反應。

屬性值 描述
auto 預設值。元素對指標事件做出反應，比如 :hover 和 click。
none 元素不對指標事件做出反應。
initial 將此屬性設定為其預設值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

示例：

<!doctype html>
<html>
<head>
<style>
div.ex1 {
  pointer-events: none;
}
  
div.ex2 {
  pointer-events: auto;
}
</style>
</head>
<body>
  
<h1>pointer-events 屬性</h1>
  
<p>請把滑鼠指標移至下面的連結，檢視是否對指標事件做出反應：</p>
  
<h2>pointer-events: none：</h2>
<div class="ex1">訪問 <a href="https://www.w3school.com.cn/html/">html 教程</a></div>
  
<h2>pointer-events: auto（預設）</h2>
<div class="ex2">訪問 <a href="https://www.w3school.com.cn/css/">css 教程</a></div>
  
</body>
</html>

注意：

  • pointer-events 的值為 none 時，如果元素上絕對定位，那在它下一層的元素可以被選中。
  • pointer-events: none; 只是用來禁用滑鼠的事件，透過其他方式繫結的事件還是會觸發的，比如鍵盤事件等。
  • 如果將一個元素的子元素 pointer-events 設定成其他值（比如：auto），那麼當點選子元素時，還是會透過事件冒泡的形式出發父元素的事件。

到此這篇關於css如何設定不可點選的實現方法的文章就介紹到這了,

相關文章