CSS如何設(shè)置不可點擊？CSS如何設(shè)置不可點擊的實現(xiàn)方法

2022-05-11 14:43:52 來源：互聯(lián)網(wǎng)作者：佚名 人氣： 次閱讀 1 條評論

CSS如何設(shè)置不可點擊？CSS如何設(shè)置不可點擊的實現(xiàn)方法可以通過設(shè)置元素的pointer-events屬性設(shè)置為none，來實現(xiàn)元素不可點擊。...

可以通過設(shè)置元素的pointer-events屬性設(shè)置為none，來實現(xiàn)元素不可點擊。

此方法是通過設(shè)置元素的鼠標(biāo)事件失效來實現(xiàn)元素不可點擊。

pointer-events: none;

css pointer-events 屬性定義元素是否對指針事件做出反應(yīng)。

屬性值 描述
auto 默認(rèn)值。元素對指針事件做出反應(yīng)，比如 :hover 和 click。
none 元素不對指針事件做出反應(yīng)。
initial 將此屬性設(shè)置為其默認(rèn)值。參閱 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>請把鼠標(biāo)指針移至下面的鏈接，查看是否對指針事件做出反應(yīng)：</p>
??
<h2>pointer-events: none：</h2>
<div class="ex1">訪問 <a >html 教程</a></div>
??
<h2>pointer-events: auto（默認(rèn)）</h2>
<div class="ex2">訪問 <a >css 教程</a></div>
??
</body>
</html>

注意：

  • pointer-events 的值為 none 時，如果元素上絕對定位，那在它下一層的元素可以被選中。
  • pointer-events: none; 只是用來禁用鼠標(biāo)的事件，通過其他方式綁定的事件還是會觸發(fā)的，比如鍵盤事件等。
  • 如果將一個元素的子元素 pointer-events 設(shè)置成其他值（比如：auto），那么當(dāng)點擊子元素時，還是會通過事件冒泡的形式出發(fā)父元素的事件。

到此這篇關(guān)于css如何設(shè)置不可點擊的實現(xiàn)方法的文章就介紹到這了,