微信号:JavaScriptcn

介绍:面向JavaScript爱好人员提供:前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js等一系列教程和经验分享.

移动端点击态的处理

2017-01-12 11:26 story

在开发移动端页面的时候,为了提高用户体验,通常会给被触控的元素加上一个效果来对用户的操作进行反馈。

这种反馈主要有三种实现方式:

伪类: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

 
           
  1. document.body.addEventListener('touchstart', function (){});

也可以直接在body上添加

 
           
  1. <body touchstart>

  2.    <!-- ... -->

  3. </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事件 
原理就是touchstart时,给元素添加className,touchstend时移除className

 
           
  1. <!-- 省略 -->

  2. <li data-touch="true">

  3. 点我

  4. </li>

  5. <!-- 省略 -->

  6. <script>

  7.    document.body.addEventListener('touchstart', function(e){

  8.        var target = e.target

  9.        if(target.dataset.touch === 'true'){

  10.            target.classList.add('active')

  11.        }

  12.    })

  13.    document.body.addEventListener('touchmove', function(e){

  14.        var target = e.target,

  15.            rect = target.getBoundingClientRect()

  16.        if(target.dataset.touch === 'true'){

  17.            // 移出元素时,取消active状态

  18.            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){

  19.                target.classList.remove('active')

  20.            }

  21.        }

  22.    })

  23.    document.body.addEventListener('touchcancel', function(e){

  24.        var target = e.target

  25.        if(target.dataset.touch === 'true'){

  26.            target.classList.remove('active')

  27.        }

  28.    })

  29.    document.body.addEventListener('touchend', function(e){

  30.        var target = e.target

  31.        if(target.dataset.touch === 'true'){

  32.            target.classList.remove('active')

  33.        }

  34.    })

  35. </script>

点击阅读原文查看demo

 
JavaScript 更多文章 那些精彩的JavaScript代码片段 假如微信小程序成功,必然掀起新一轮互联网巨头流量争夺战 微信小程序正式上线,瞄准轻量级服务,入口需手动激活 微信小程序明日正式上线,增加社交功能 Web Components 是个什么样的东西
猜您喜欢 【实录】Distributed&nbsp;Database&nbsp;Containers&nbsp;Deployment&nb MD5足够吗----谈PHP中信息加密技术 Tomcat集成到JbossWeb(从jbossweb看Tomcat之二) Java 8 中的 Lambda 表达式 各城市存储微信群陆续创建,手快有,手慢无