移动端点击态的处理

raoyi 发布于2019-08-20 18:31 / 3184人阅读

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

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

伪类: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时，给元素添加className，touchstend时移除className
仅需给需要效果的元素添加 data-touch="true"，css中有对应的.active即可



点我

转载自：移动端点击态处理

GPU云服务器云服务器 html点击图片移动 html鼠标点击移动移动端海外移动端

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

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

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

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

haobowd 2019-08-29 11:06 评论0 收藏0
web移动开发中如何实现图标点击态的蒙层效果

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

vincent_xyb 2019-08-01 15:33 评论0 收藏0
聊聊二维码登录

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

Tikitoo 2019-06-21 16:38 评论0 收藏0