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


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 相关文章推荐
DOM精简教程
Oct 03 Javascript
List Installed Software Features
Jun 11 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
分析javascript原型及原型链
Mar 18 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php使用百度天气接口示例
2014/04/22 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
React Native预设占位placeholder的使用
2017/09/28 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
python获取代理IP的实例分享
2018/05/07 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python 元组操作总结
2019/09/18 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
python中如何写类
2020/06/29 Python
phpquery中文手册
2021/03/18 PHP
戴尔美国官网:Dell
2016/08/31 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
工厂采购员岗位职责
2014/04/08 职场文书
小学毕业演讲稿
2014/04/25 职场文书
高效课堂标语
2014/06/26 职场文书
企业领导对照检查材料
2014/08/20 职场文书
师德师风整改措施
2014/10/24 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis