全国咨询热线:18720358503

广东抖音微信小程序_移动端点击态处理的三种完

类别:行业新闻 发布时间:2021-01-12 浏览人次:

移动端点击态处理的三种实现方式       在移动端开发的时候,常常需要加点击态,就是当用户点击某个URL时,给相应的标签添加按下效果样式。这篇文章给大家分享了三种实现方法,包括伪类:active、webkit-tap-highlight-color和touch事件,下面来一起看看详细的介绍吧。

前言

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

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

此外,由于移动端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 

总结

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


推荐阅读

广东抖音微信小程序_移动端点击态处理的三种完

手机端点一下态解决的三种完成方法 在手机端开发设计的情况下,经常必须天赋加点击态,便是当客户点一下某一URL时,给相对的标识加上按住实际效果款式。本文给大伙儿共享...

2021-01-12
浅谈网站分哪几种类型

客户资询企业网站建设花费时,常常不确定性自身要做的网站归属于甚么种类的,企业网站建设企业探讨网站风格都不能区划的很确立,只有从大约的作用上去区别。一般商品展现网站...

2021-01-12
团购微信小程序开发_走进AngularJs之过滤器(fil

走入AngularJs之过虑器(filter)详细说明 过虑器(filter)如同其名,功效便是接受一个键入,根据某一标准开展解决,随后回到解决后的結果。关键用在数据信息的文件格式化上,...

2021-01-12
成功实现新闻营销的五大基本要素

新闻报道营销推广是运用了新闻报道没法取代的高关心度,因而产生精确的营销推广实际效果。新闻报道做为散播全新信息内容的人物角色,其影响力不能更改。假如将互联网散播信息...

2021-01-12
关于微信小程序的文章_Vue中添加过渡效果的方法

Vue中加上衔接实际效果的方式 4、能够相互配合应用第三方 JavaScript 动漫库,如 Velocity.js在其中里边也得出了很多的事例,可是事例给来到“好几个原素衔接”的情况下,就沒有实...

2021-01-12
如何优化网站以反映价值

网站的发展趋势,早已趋于于客观化。例如,如今一名SEO提升工作人员向公司网络推广,承担公司网络运营工作人员,她们已不了解SEO提升究竟怎样怎样好,只是跟重视网站本身的发展...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信