移动端点击态的处理
在开发移动端页面的时候，为了提高用户体验，通常会给被触控的元素加上一个效果来对用户的操作进行反馈，这种反馈主要有三种实现方式:
伪类:active
伪类是一种比较方便的实现方式，但在 ios 中，需要在相关的元素或者 body 上绑定 touchstart
事件才能使元素的 :active 生效
document.body.addEventListener('touchstart', function (){});也可以直接在 body 上添加
<body touchstart>
<!-- ... -->
</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即可
<!-- 省略 -->
<li data-touch="true">
点我
</li>
<!-- 省略 -->
<script>
// 点击时添加.active效果
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'){
// 移出元素时，取消active状态
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>转载自：移动端点击态处理
相关推荐
一青年 2020-08-13
ghjk0 2020-09-24
PncLogon 2020-09-24
杏仁技术站 2020-09-18
AI人工智能 2020-09-18
木叶 2020-09-11
淼寒儿 2020-09-09
JackyCan 2020-08-13
JKjiang 2020-07-30
malonely 2020-07-20
加油奋斗吧 2020-07-04
quanquanxiu 2020-06-16
樱花落瓣 2020-06-01
ITstudied 2020-05-17
yuanxiaogang 2020-05-07
前端学习笔记 2020-05-05
aaLiweipeng 2020-04-18
owilson 2020-04-16