移动端点击态处理的三种实现方式


Posted in Javascript onJanuary 12, 2017

前言

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

一、伪类:active

:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等。在多按键的鼠标系统中,:active只适用于主按键,目前的大部分情况都是左键即主键。

该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。

值得注意的是:伪类是一种比较方便的实现方式,但在ios中,需要在相关的元素或者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>

此外,由于移动端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的值为边框的颜色

三、touch事件

当用户手指放在移动设备在屏幕上滑动会触发的touch事件。原理就是touchstart时,给元素添加classNametouchstend时移除className

<!-- 省略 -->
<li data-touch="true">
点我
</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'){
  // 移出元素时,取消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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
syntaxhighlighter 使用方法
Jul 02 Javascript
js事件(Event)知识整理
Oct 11 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
Node.js学习入门
Jan 03 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
实例详解vue中的$root和$parent
Apr 29 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 #Javascript
js图片轮播手动切换特效
Jan 12 #Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 #Javascript
JavaScript定义全局对象的方法示例
Jan 12 #Javascript
Node.js制作简单聊天室
Jan 12 #Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 #Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
在Python中使用Neo4j数据库的教程
2015/04/16 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python动态视频下载器的实现方法
2019/09/16 Python
python 读取二进制 显示图片案例
2020/04/24 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
事业单位辞职信范文
2014/01/19 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
消防安全标语
2014/06/07 职场文书
找工作求职信
2014/07/07 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
教你nginx跳转配置的四种方式
2022/07/07 Servers