现状
我们发现在vant官网上面点击vant的组件(van-cell,van-button)会有鼠标按下的效果,而且vant官网在移动端上面访问时,点击组件也会有按下的效果,但是当我们自己的工程使用vant时,突然发现vant 的点击效果失效了。
分析原因
通过vant的官网上查找原因发现vant定义了一系列的css变量,不难发现其中一个变量就是控制组件高亮显示的。
同过以上代码我们可以知道按下的高亮效果是:active的状态控制的。
而 :active只有在dom元素被点击时才存在的状态(click 触发)
在mozilla开发社区上可以找到答案
[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.
在ios系统上需要在dom上绑定touch事件才能激活:active
解决思路
可以在dom上添加touchstart 或者全局添加touchstart事件
dom上添加
document.getElementById('***').addEventListener("touchstart",function(){})
全局添加
document.addEventListener("touchstart", function(){});```