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


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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
js程序中美元符号$是什么
Jun 05 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
javascript整除实现代码
Nov 23 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
AngularJS实现表单验证
Jan 28 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 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
PHP 组件化编程技巧
2009/06/06 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
python解析json实例方法
2013/11/19 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
python3 反射的四种基本方法解析
2019/08/26 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
优秀教师获奖感言
2014/01/31 职场文书
预备党员综合考察材料
2014/05/31 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
领导欢迎词致辞
2015/01/23 职场文书
人事专员岗位职责
2015/02/03 职场文书
战马观后感
2015/06/08 职场文书
培根随笔读书笔记
2015/07/01 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python