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


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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 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
How do I change MySQL timezone?
2008/03/26 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
vue实现记事本功能
2019/06/26 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python的Tqdm模块的使用
2018/01/10 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python实现石头剪刀布小游戏
2021/01/20 Python
浅析python的Lambda表达式
2019/02/27 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
学校火灾防控方案
2014/06/09 职场文书
大学生工作自荐书
2014/06/16 职场文书
最美家庭活动方案
2014/08/31 职场文书
教导主任个人总结
2015/03/03 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle