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

前言

在开发移动端页面的时候，为了提高用户体验，通常会给被触控的元素加上一个效果来对用户的操作进行反馈。这种反馈主要有三种实现方式，有需要的朋友们下面来一起看看吧。

一、伪类: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时，给元素添加className，touchstend时移除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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • 基于JavaScript实现移动端点击图片查看大图点击大图隐藏

    一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">

  • jquery实现移动端点击图片查看大图特效

    jquery实现移动端点击图片查看大图特效

    本文的需求很简单:点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 具体实现代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css&quo

  • jquery移动端TAB触屏切换实现效果

    我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-163css"> <ul id

  • 移动端点击图片放大特效PhotoSwipe.js插件实现

    PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ photoswipe之移动端图片放大查看,滑动切换下一张,图片保存到本地. <style> .pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px} .pnav a{padding:4px} .pnav a.cur{background:#00

  • Javascript实现视频轮播在pc端与移动端均可

    Javascript实现视频轮播在pc端与移动端均可

    最近客户要求用Javascript实现视频轮播: 有兴趣的同学可以参开一下 下面写了一个程序实现视频轮播,pc端与移动端均可以实现, 但移动端,存在有一点bug; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <met

  • JS判断移动端访问设备并加载对应CSS样式

    JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) 复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • js如何判断用户是在PC端和还是移动端访问

    最近一直在忙我们团队的项目"咖啡之翼",在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而且许多国内开发者也开始投身于Android移动终端的大浪潮中.如果很多互联网大浪潮你错过了.那么这个Android浪潮你绝对不能错过.目前我们为"咖啡之翼"已经开发了移动终端以及安卓客户端,大家使用Android或者IOS操作系统的手机,直接访问域名www.sygxy.cn即可观看移动终端效果.同时Android客户

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

    前言 在开发移动端页面的时候,为了提高用户体验,通常会给被触控的元素加上一个效果来对用户的操作进行反馈.这种反馈主要有三种实现方式,有需要的朋友们下面来一起看看吧. 一.伪类:active :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等.在多按键的鼠标系统中,:active只适用于主按键,目前的大部分情况都是左键即主键. 该伪类下定义的CSS样式只在按下鼠

  • IIS下PHP的三种配置方式对比

    在Windows IIS 6.0下配置PHP,通常有CGI.ISAPI和FastCGI三种配置方式,这三种模式都可以在IIS 6.0下成功运行,下面我就讲一下这三种方式配置的区别和性能上的差异.   1.CGI(通用网关接口/Common Gateway Interface)一般是可执行程序,例如EXE文件,和WEB服务器各自占据着不同的进程,而且一般一个CGI程序只能处理一个用户请求.这样,当用户请求数量非常多时,会大量占用系统的资源,如内存.CPU时间等,造成效能低下.   2.ISAPI(

  • Python selenium 三种等待方式详解(必会)

    很多人在群里问,这个下拉框定位不到.那个弹出框定位不到-各种定位不到,其实大多数情况下就是两种问题:1 有frame,2 没有加等待.殊不知,你的代码运行速度是什么量级的,而浏览器加载渲染速度又是什么量级的,就好比闪电侠和凹凸曼约好去打怪兽,然后闪电侠打完回来之后问凹凸曼你为啥还在穿鞋没出门?凹凸曼分分中内心一万只羊驼飞过,欺负哥速度慢,哥不跟你玩了,抛个异常撂挑子了. 那么怎么才能照顾到凹凸曼缓慢的加载速度呢?只有一个办法,那就是等喽.说到等,又有三种等法,且听博主一一道来: 1. 强制等待

  • 关于js的三种使用方式（行内js、内部js、外部js）的程序代码

    本文讲述了js的三种使用方式(行内js.内部js.外部js)的实例代码,感兴趣的小伙伴们可以参考一下,具体如下: 1.行内js:js不单独写出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js使用方式1:行内js</title> </head> <body> <input

  • JS 验证码功能的三种实现方式

    摘要: 我们在做一些后台系统的登录验证的时候.难免会用到验证码功能,来辅助进行验证,提高安全性,在我们日常生活中,验证方式无处不在,最多的是短信验证码的方式,通过点击发送验证码,然后手机接收短信,填写验证码才能登陆成功,但是也有一些其他验证码功能也在使用,所以,我就想着来集中记录一下,希望对大家有所帮助... 一.数字短信验证码 思路: a.两个文本框+一个获取验证码按钮,文本框用来输入手机号和获取到的验证码,按钮负责点击和记录倒计时: b.js书写定时器setTimeout,进行60秒验证码失

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • Java中switch的三种用法方式

    Java中switch的三种用法详解: switch居然有三种方式 ? 作为一个接触java不久的人来说,这确实让我吃了一惊! 根据版本,在java14开始, switch语句有了一个很大的调整, 这就让swicth语句有了更多的操作和选择,在代码上,更加的简便灵活, 让我们试试这神奇的switch吧! 使用switch这个关键词, 我们可以很好的解决if-else 中多重选择的尴尬场面! Java中switch的三种用法详解: switch 标准方式 switch - > 用法: switch

  • Python selenium的这三种等待方式一定要会!

    Python selenium的这三种等待方式一定要会!

    一.为什么要使用等待? 在自动化测试脚本的运行过程中,webdriver操作浏览器的时候,对于元素的定位是有一定的超时 时间,大致在1-3秒 如果这个时间内仍然定位不到元素,就会抛出异常,中止脚本执行 我们可以通过在脚本中设置等待的方式来避免由于网络延迟或浏览器卡顿导致的偶然失败 二.常用的三种等待方式 强制等待 隐式等待 显示等待 三.强制等待 利用time模块的sleep方法来实现,最简单粗暴的等待方法 强制等待,不管你浏览器是否加载完成,都得给我等待3秒,3秒一到,继续执行下面的代码 #

  • python自动化测试selenium核心技术三种等待方式详解

    python自动化测试selenium核心技术三种等待方式详解

    目录 1 使用python自带模块time的sleep方式 2 隐式等待(implicitly_wait) 3 显示等待(WebDriverWait) UI自动化测试过程中,可能会出现因测试环境不稳定.网络慢等情况,如果不做任何处理的话,会出现无法定位到特定元素而报错,导致自动化测试无法顺利执行. selenium官网手册:Waits | Selenium slenium自动化测试中,主要涉及三种等待方式: 1 使用python自带模块time的sleep方式 缺点:即使网络条件较好时,依旧按照

  • Selenium 三种等待方式(强制等待、隐式等待、显示等待)

    1.强制等待(sleep) from time import sleep sleep(3) # 强制等待3秒 缺点:由于Web加载的速度取决于测试的硬件.网速.服务器的响应时间等因素.如果等待时间太长,容易造成时间浪费,如果等待时间太短又可能会造成在web还没有加载完所需要定位的element,而出现报错.由于等待时间无法确定,使用太多的sleep会影响运行速度,大大地降低效率,所以建议测试中尽量少使用强制等待. 2.隐式等待 ( implicitly_wait) # 隐式等待10s drive

随机推荐