資訊專欄INFORMATION COLUMN
摘要：值得一提的是，僅僅是鼠標事件失效，用鍵還是可以選中該鏈接的，然后打開，這個時候可以去掉標簽的屬性，就不能讓鍵選中了實踐一今天改了一個眾審中心的。
簡介
pointer-events: none 真是個神奇的屬性。
該屬性有什么用？借用 CSS3 pointer-events:none 應用舉例及擴展 的總結(jié)來說：test
pointer-events: none 顧名思義，就是鼠標事件拜拜的意思。元素應用了該 CSS 屬性，鏈接啊，點擊啊什么的都變成了 “浮云牌醬油”。pointer-events: none 的作用是讓元素實體 “虛化”。例如一個應用 pointer-events: none 的按鈕元素，則我們在頁面上看到的這個按鈕，只是一個虛幻的影子而已，您可以理解為海市蜃樓，幽靈的軀體。當我們用手觸碰它的時候可以輕易地沒有任何感覺地從中穿過去。
大家都知道 input[type=text|button|radio|checkbox] 支持 disabled 屬性，可以實現(xiàn)事件的完全禁用。如果其他標簽需要類似的禁用效果，可以試試 pointer-events: none
舉個簡單的例子：
click me
這個鏈接，你是點不了的，并且 hover 也沒有效果。（值得一提的是，僅僅是鼠標事件失效，用 tab 鍵還是可以選中該鏈接的，然后 enter 打開，這個時候可以去掉 a 標簽的 href 屬性，就不能讓 tab 鍵選中了）
實踐一今天改了一個 眾審中心 的 bug。
比如，挖墳帖審核 如果反對通過的話，需要選中理由，如圖：
從代碼角度上講，該元素是支持 click 和 hover 的。
眾審中心其實有很多子項目，用的是一個模版，但是 標簽清理 不一樣，它沒有勾選理由的功能（理由只是展示），但是因為用的是一套模版代碼，所以之前的 bug 就是相似位置也是可點擊的，現(xiàn)在要修改為不可點擊。
簡單看了下，一個 li 標簽（其實不管是啥標簽啦），直接給它加上 pointer-events: none 完美解決。
如果不這樣做，就要從 js 入手，判斷響應的模塊，去掉 click 事件（標簽清理模塊特判），然后 CSS 也要修改，hover 效果也要一起去掉（標簽清理模塊需要另外構(gòu)造樣式）。加上我對這里的代碼不熟悉，可能完美解決問題需要花一定的時間。
不得不感嘆 pointer-events: none 大法好！
實踐二SegmentFault 5 周年 是前同事 @cheri 在 SF 五周年的時候做的網(wǎng)頁，彈幕層用了 canvas 構(gòu)造，canvas 下面的內(nèi)容其實是被 canvas 遮住了，無法點擊。
這個時候，pointer-events: none 又要閃亮登場啦！還記得前面說的嗎，元素應用了 pointer-events: none ，其實就是海市蜃樓啦，任何事件都可以輕易從它身上穿過去！
所以我們給 canvas 加上 pointer-events: none，真正在下面的內(nèi)容就可以被點擊了。
其實類似的例子很多，參考 CSS3 pointer-events 介紹 舉的例子：
比如在某個項目中，很多元素需要定位在一個地圖層上面，這里就要用到很多絕對定位或者相對定位的元素，但是這樣的話，這些浮在上面的 div 或者其它元素一般都會給個寬高，或者 relative 的元素可以不給寬高，這個時候，這些元素就會蓋住下面的地圖層，以至于地圖層無法操作。那么我們就可以給這個 div 設置 pointer-events: none，然后你就會發(fā)現(xiàn)下面的地圖就可以拖動和點擊了。但是悲劇的是，操作區(qū)域本身卻無法操作了，直接被無視掉了，不過不用擔心，我們可以給里面的元素重新設置為 pointer-events:auto，當然，只給需要操作的元素區(qū)域設置。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113352.html
摘要：屬性效果和沒有定義屬性相同，鼠標不會穿透當前層。在中，該值和的效果相同。元素不再是鼠標事件的目標，鼠標不再監(jiān)聽當前層而去監(jiān)聽下面的層中的元素。其它屬性值為專用，這里不再多介紹了。 pointer-events屬性 auto——效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。 none——元素不再是鼠標事...
摘要：上介紹為屬性指定在什么情況下如果有某個特定的圖形元素可以成為鼠標事件的。屬性值有其中默認屬性為。當值為表示鼠標事件穿透該元素并且指定該元素下面的任何東西。網(wǎng)友敘帝利給出了一種使用場景。加上則不會響應事件了。 MDN 上介紹為 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。pointer-events 屬性值有: /* Keyword va...
摘要：上介紹為屬性指定在什么情況下如果有某個特定的圖形元素可以成為鼠標事件的。屬性值有其中默認屬性為。當值為表示鼠標事件穿透該元素并且指定該元素下面的任何東西。網(wǎng)友敘帝利給出了一種使用場景。加上則不會響應事件了。 MDN 上介紹為 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。pointer-events 屬性值有: /* Keyword va...
摘要：此處就不一一贅述。我說的方法只需要給表單加上一個類，就可以讓表單只讀。方法用給做個看不見的蒙版，遮住下面所有的元素，使之不響應任何事件方法用讓所有事件穿透關于屬性，可以看看這個介紹 一般的方法往往給表單的各個input、select等加上readonly，但是這個方法有很多缺點。此處就不一一贅述。 我說的方法只需要給表單加上一個類，就可以讓表單只讀。 方法1: 用:before給fo...
摘要：此處就不一一贅述。我說的方法只需要給表單加上一個類，就可以讓表單只讀。方法用給做個看不見的蒙版，遮住下面所有的元素，使之不響應任何事件方法用讓所有事件穿透關于屬性，可以看看這個介紹 一般的方法往往給表單的各個input、select等加上readonly，但是這個方法有很多缺點。此處就不一一贅述。 我說的方法只需要給表單加上一個類，就可以讓表單只讀。 方法1: 用:before給fo...
閱讀 1964·2023-04-25 15:45
閱讀 1197·2021-09-29 09:34
閱讀 2497·2021-09-03 10:30
閱讀 2000·2019-08-30 15:56
閱讀 1456·2019-08-29 15:31
閱讀 1268·2019-08-29 15:29
閱讀 3196·2019-08-29 11:24
閱讀 3047·2019-08-26 13:45
