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