您好,登錄后才能下訂單哦!
這篇文章主要介紹web開發(fā)移動(dòng)端如何實(shí)現(xiàn)點(diǎn)擊動(dòng)態(tài)處理,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
一、偽類:active
:active偽類常用于設(shè)定點(diǎn)擊狀態(tài)下或其他被激活狀態(tài)下一個(gè)鏈接的樣式。最常用于錨點(diǎn)<a href="#">這種情況,一般主流瀏覽器下也支持其他元素,如button等。在多按鍵的鼠標(biāo)系統(tǒng)中,:active只適用于主按鍵,目前的大部分情況都是左鍵即主鍵。
該偽類下定義的CSS樣式只在按下鼠標(biāo)按鈕與釋放鼠標(biāo)按鈕之間的短暫瞬間被觸發(fā)顯示。使用鍵盤的tab鍵也可以觸發(fā):active狀態(tài)。
值得注意的是:偽類是一種比較方便的實(shí)現(xiàn)方式,但在ios中,需要在相關(guān)的元素或者body
上綁定touchstart
事件才能使元素的:active
生效。
By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the .—MDN
document.body.addEventListener('touchstart', function (){});
也可以直接在body
上添加
<body touchstart> <!-- ... --> </body>
此外,由于移動(dòng)端300ms延遲問題,觸摸反饋會(huì)有延遲,可以使用Fastclick解決。
二、webkit-tap-highlight-color
這個(gè)屬性并不是標(biāo)準(zhǔn)的,被用于設(shè)置超鏈接被點(diǎn)擊時(shí)高亮的顏色,在ios設(shè)備上表現(xiàn)為一個(gè)半透膜的灰色背景,可以設(shè)置-webkit-tap-highlight-color
為任何顏色,例如rgba(0,0,0,0.5)
,如果未設(shè)置顏色的alpha
值,將使用默認(rèn)的透明度,alpha
為0時(shí),將禁用高亮,alpha
為1時(shí),元素在點(diǎn)擊時(shí)將不可見
大部分安卓設(shè)備也支持這個(gè)屬性,但是顯示的效果不同,表現(xiàn)為一個(gè)邊框, -webkit-tap-highlight-color
的值為邊框的顏色
三、touch事件
當(dāng)用戶手指放在移動(dòng)設(shè)備在屏幕上滑動(dòng)會(huì)觸發(fā)的touch事件。原理就是touchstart
時(shí),給元素添加className
,touchstend
時(shí)移除className
<!-- 省略 --> <li data-touch="true"> 點(diǎn)我 </li> <!-- 省略 --> <script> document.body.addEventListener('touchstart', function(e){ var target = e.target if(target.dataset.touch === 'true'){ target.classList.add('active') } }) document.body.addEventListener('touchmove', function(e){ var target = e.target, rect = target.getBoundingClientRect() if(target.dataset.touch === 'true'){ // 移出元素時(shí),取消active狀態(tài) if(e.changedTouches[0].pageX<rect.left || e.changedTouches[0].pageX>rect.right || e.changedTouches[0].pageY<rect.top || e.changedTouches[0].pageY>rect.bottom){ target.classList.remove('active') } } }) document.body.addEventListener('touchcancel', function(e){ var target = e.target if(target.dataset.touch === 'true'){ target.classList.remove('active') } }) document.body.addEventListener('touchend', function(e){ var target = e.target if(target.dataset.touch === 'true'){ target.classList.remove('active') } }) </script>
以上是“web開發(fā)移動(dòng)端如何實(shí)現(xiàn)點(diǎn)擊動(dòng)態(tài)處理”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。