微信浏览器或各种移动浏览器上active伪类做的触觉反馈失效
8337次阅读
490人点赞
发布时间: 2022-11-24 16:03:36
扫码到手机查看
![]()
在做移动端页面的时候，会发现PC上那种:hover的效果是不管用了的，但又要给用户一个点击反馈怎么办呢？我管它叫触觉反馈。细心点就会发现浏览器有自带了一点触觉反馈，在点击a、button、input的时候都会出现。这个应该是浏览器的默认样式，有时候是想要这样的，可以加样式解决，比如：
a,button,input{-webkit-tap-highlight-color:rgba(255,255,255,0);}其实就是把a、button、input这些标签的系统触觉反馈的样式改了，白色透明：rgba(255,255,255,0);
最好加上哦，不然这个和以下自定义的样式同时出现还是挺怪的。然后我们怎么自定义样式呢？以前曾经试过ontouchstart、ontouchend。。结果感觉实在是太麻烦了！而且感觉性能也很差，肯定有更好的办法。
那就是:active这个伪类，duangduangduangduang!。像这样：
a{color:#1ec4a3;}
a:active{color:#28A289;}当手点下去的时候理论上讲是会变得更绿的。
但是是没用的！！
其实是因为少了行启用触觉事件监听的代码，只要在body上加上ontouchstart就好了，像这样：
<body ontouchstart>
内容
</body>或者在你喜欢的地方插入js：
document.body.addEventListener('touchstart', function () {});然后有些可能要对div做触觉反馈，可以考虑给body或需要的地方加上:
-webkit-user-select: none;这样会把系统字体放大镜、复制等给干掉。看需要加把。
目录