VantUI的组件在移动端没有点击效果

577 阅读1分钟

现状

我们发现在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(){});```