资讯专栏INFORMATION COLUMN

移动端点击态的处理

raoyi / 3129人阅读

摘要:在开发移动端页面的时候,为了提高用户体验,通常会给被触控的元素加上一个效果来对用户的操作进行反馈,这种反馈主要有三种实现方式伪类伪类是一种比较方便的实现方式,但在中,需要在相关的元素或者上绑定事件才能使元素的生效也可以直接在上添加此

在开发移动端页面的时候,为了提高用户体验,通常会给被触控的元素加上一个效果来对用户的操作进行反馈,这种反馈主要有三种实现方式:

伪类:active

伪类是一种比较方便的实现方式,但在 ios 中,需要在相关的元素或者 body 上绑定 touchstart
事件才能使元素的 :active 生效

  document.body.addEventListener("touchstart", function (){});

也可以直接在 body 上添加


    

此外,由于移动端 300ms 延迟问题,触摸反馈会有延迟,可以使用 Fastclick 解决

局限性:
仅当轻触时有效,当长按时只是动画闪动,无法实现点击时触发动画,离开时取消动画的效果

-webkit-tap-highlight-color

这个属性并不是标准的,被用于设置超链接被点击时高亮的颜色,在ios设备上表现为一个半透膜的灰色背景,可以设置-webkit-tap-highlight-color为任何颜色,例如rgba(0,0,0,0.5),如果未设置颜色的alpha值,将使用默认的透明度,alpha为0时,将禁用高亮,alpha为1时,元素在点击时将不可见,大部分安卓设备也支持这个属性,但是显示的效果不同,表现为一个边框,-webkit-tap-highlight-color的值为边框的颜色

局限性:
必须将需要设置点击效果的元素使用a标签包裹,而且在安卓一些机型上存在兼容

touch事件

原理就是touchstart时,给元素添加classNametouchstend时移除className
仅需给需要效果的元素添加 data-touch="true"css中有对应的.active即可


  • 点我
  • 转载自:移动端点击态处理

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/84635.html

    相关文章

    • web移动开发中如何实现图标点击态的蒙层效果

      摘要:开发中经常需要加入点击二态,即用户点击页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要讨论的是如何给图标加上点击的二态效果。如果添加蒙层我们先用最容易想到的方法来实现这个需求。 webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们...

      haobowd 评论0 收藏0
    • web移动开发中如何实现图标点击态的蒙层效果

      摘要:开发中经常需要加入点击二态,即用户点击页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要讨论的是如何给图标加上点击的二态效果。如果添加蒙层我们先用最容易想到的方法来实现这个需求。 webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们...

      vincent_xyb 评论0 收藏0
    • 聊聊二维码登录

      摘要:场景主要的场景有如下几个扫二维码登录版系统比如微信版,在手机端微信登录的前提下,扫二维码确认,自动登录网页版。小结二维码扫描登录是个挺潮流的功能,这要求既有系统增加改造,也要求针对这种形式的登录带来潜在的攻击进行安全防范。 序 本文主要来研究一下二维码登录的相关场景和原理。 场景 主要的场景有如下几个: app扫二维码登录pc版系统 比如微信web版,在手机端微信登录的前提下,扫二维码...

      Tikitoo 评论0 收藏0

    发表评论

    0条评论

    raoyi

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <