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


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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
如何利用js在两个html窗口间通信
Apr 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之apc
2013/05/15 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
Javascript模块模式分析
2008/05/16 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
Django实现内容缓存实例方法
2020/06/30 Python
党支部创先争优承诺书
2014/08/30 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
使用python绘制横竖条形图
2022/04/21 Python
Java 多态分析
2022/04/26 Java/Android