css如何設置不可點擊的實現(xiàn)方法
發(fā)布時間：2022-05-06 16:51:39 作者： Terence Wang 
我要評論
我要評論本文主要介紹了css如何設置不可點擊的實現(xiàn)方法，可以通過設置元素的pointer-events屬性設置為none，來實現(xiàn)元素不可點擊，具有一定的參考價值，感興趣的可以了解一下
可以通過設置元素的pointer-events屬性設置為none，來實現(xiàn)元素不可點擊。
此方法是通過設置元素的鼠標事件失效來實現(xiàn)元素不可點擊。
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; 只是用來禁用鼠標的事件，通過其他方式綁定的事件還是會觸發(fā)的，比如鍵盤事件等。
- 如果將一個元素的子元素 pointer-events 設置成其他值（比如：auto），那么當點擊子元素時，還是會通過事件冒泡的形式出發(fā)父元素的事件。
到此這篇關于css如何設置不可點擊的實現(xiàn)方法的文章就介紹到這了,更多相關css設置不可點擊內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
css偽類 右下角點擊出現(xiàn) 對號角標表示選中的示例代碼
這篇文章主要介紹了css偽類 右下角點擊出現(xiàn) 對號角標表示選中，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-22用CSS防Lightbox實現(xiàn)點擊小圖無刷新顯示大圖代碼
這篇文章主要介紹了用CSS防Lightbox實現(xiàn)點擊小圖無刷新顯示大圖代碼,需代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，要的朋友可以參考下2019-09-09
這篇文章主要介紹了實現(xiàn)點擊按鈕后CSS加載效果的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2019-05-09- 這篇文章主要為大家詳細介紹了CSS鼠標點擊改變圖片透明度，為大家提供改變圖片css透明度屬性的簡單方法，感興趣的小伙伴們可以參考一下2016-03-08
- 這篇文章主要介紹了CSS中的map標簽制作單圖多區(qū)域點擊的示例,可在同一張圖片上實現(xiàn)多個點擊事件的熱點,需要的朋友可以參考下2015-07-20
- a標簽點擊后會有虛框，這是一個很影響視覺的問題，下面有個不錯的解決方法，大家可以參考下2014-02-26
- input和textarea點擊選中框很影響美觀，有什么方法可以將它去除掉呢？下面有個不錯的方法，需要的朋友可以參考下2013-11-25
- 滾動翻頁這樣的效果想必各位在瀏覽網(wǎng)頁的時候都有見過吧，本文將使用純css實現(xiàn)這個效果，不含有任何的輔助代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-22
