国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用 :focus-within 實(shí)現(xiàn)純 CSS 下拉框組件

崔曉明 / 1837人閱讀

摘要：借用的例子當(dāng)點(diǎn)擊表單中的文本框時(shí)需高亮整個(gè)表單元素。但是表單內(nèi)部的文本框獲得焦點(diǎn)并不代表表單元素本身有焦點(diǎn)，所以使用并不能生效，這時(shí)就可以使用當(dāng)然這也是的其中一個(gè)典型用法。

:focus-within 偽類：當(dāng)本節(jié)點(diǎn)或其子節(jié)點(diǎn)獲得焦點(diǎn)時(shí)被激活。

借用 MDN 的例子

https://jsfiddle.net/d4w8h2ge/

當(dāng)點(diǎn)擊表單中的文本框時(shí)需高亮整個(gè)表單元素。但是表單內(nèi)部的文本框獲得焦點(diǎn)并不代表表單元素本身有焦點(diǎn)，所以使用 form:focus 并不能生效，這時(shí)就可以使用 :focus-within

當(dāng)然這也是 :focus-within 的其中一個(gè)典型用法。

使用普通的綁定 click 事件的方式實(shí)現(xiàn)下拉框組件

回到正題，這是一個(gè)使用 JS 實(shí)現(xiàn)的下拉框：https://jsfiddle.net/omo6cov2/1/

為了實(shí)現(xiàn)這個(gè)下拉框，你通常(*)需要綁定兩個(gè) click 事件：一個(gè)在 a 標(biāo)簽上用于打開下拉框；一個(gè)在 body 上用于關(guān)閉下拉框。在 body 的 click 事件處理函數(shù)里，你得判斷事件不能是來自下拉框內(nèi)部的點(diǎn)擊。你還得記得在移除下拉框（例如單頁程序切換路由）時(shí)移除這個(gè)事件。

還有兩個(gè)問題：

由于在 body 上綁定了事件，在下拉框關(guān)閉時(shí)也會(huì)觸發(fā)，造成不必要的開銷。

如果頁面被嵌在 iframe 內(nèi)，點(diǎn)擊 iframe 外部元素不會(huì)觸發(fā) iframe 內(nèi)部的 click 事件，所以無法通過點(diǎn)擊 iframe 外部關(guān)閉下拉框。

使用 :focus-within 實(shí)現(xiàn)下拉框組件

這是一個(gè)使用 :focus-within 實(shí)現(xiàn)下拉框組件：https://jsfiddle.net/2vnn7fa4/1/

原理：點(diǎn)擊鏈接時(shí)，a 元素獲得焦點(diǎn)，激活了父元素的 :focus-within

除了把 .dropdown:not(.open) 改為 .dropdown:not(:focus-within) 外，還有一個(gè)要點(diǎn)：ul 標(biāo)簽本身（及其父元素們都）不能獲得焦點(diǎn)，所以點(diǎn)擊下拉框內(nèi)部時(shí)默認(rèn)會(huì)把整個(gè)文檔的焦點(diǎn)清除。解決方法很簡單：給 ul 標(biāo)簽添加 tabindex 屬性即可。

另外：Chrome 的 devtool 里有一項(xiàng) Force state -> :focus-within，調(diào)樣式時(shí)不要忘了選

完

瀏覽器支持率，edge 需要加把勁了

(*)：當(dāng)然如果你非要把 a 元素上的 click 事件放入 document 的 click 事件里處理我也沒意見。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113308.html

相關(guān)文章

  • 用 :focus-within 實(shí)現(xiàn)純 CSS 下拉框組件

    摘要：借用的例子當(dāng)點(diǎn)擊表單中的文本框時(shí)需高亮整個(gè)表單元素。但是表單內(nèi)部的文本框獲得焦點(diǎn)并不代表表單元素本身有焦點(diǎn)，所以使用并不能生效，這時(shí)就可以使用當(dāng)然這也是的其中一個(gè)典型用法。 :focus-within 偽類：當(dāng)本節(jié)點(diǎn)或其子節(jié)點(diǎn)獲得焦點(diǎn)時(shí)被激活。 借用 MDN 的例子 https://jsfiddle.net/d4w8h2ge/ 當(dāng)點(diǎn)擊表單中的文本框時(shí)需高亮整個(gè)表單元素。但是表單內(nèi)部的文...

    focusj 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達(dá)，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    BigTomato 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達(dá)，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    lanffy 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達(dá)，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    張金寶 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<