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


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 对象定义方法 简单易学
Mar 22 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 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 循环列出目录内容的函数代码
2010/05/26 PHP
学习php笔记 字符串处理
2010/10/19 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
解读ES6中class关键字
2017/11/20 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python 计算文件的md5值实例
2017/01/13 Python
python变量的存储原理详解
2019/07/10 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
异步传递消息系统的作用
2016/05/01 面试题
技术总监管理职责范本
2014/03/06 职场文书
安全生产月演讲稿
2014/05/09 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
经典祝酒词大全
2015/08/12 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android