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


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 相关文章推荐
jquery的index方法实现tab效果
Feb 16 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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针对redis常用操作实例详解
2019/08/17 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
vue动态改变背景图片demo分享
2018/09/13 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python处理文本换行符实例代码
2018/02/03 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
python实现连续图文识别
2018/12/18 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
python mysql中in参数化说明
2020/06/05 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
廉政教育心得体会
2014/01/01 职场文书
绩效工资分配方案
2014/01/18 职场文书
小学校园活动策划
2014/01/30 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
Golang入门之计时器
2022/05/04 Golang