CSS移动端实现PC端长按:active效果(改变背景色)

经常看到有些移动端页面某些块或者按钮在长按以后可以出现背景色或者字体颜色的改变,初始以为是利用js去实现,后面转念一想用js来实现这个小功能也太麻烦了,参照了一些美团H5的页面,发现他们原来是这么做的:

首先:

我们在body上绑定一个touchstart事件,然后就可以啦!什么事情都不用做了..

document.body.addEventListener('touchstart', () => {});

其次:

我们只要在class样式上写一下样式就可以了

.touch:active{

    background-color: #f5f5f5;

 }

最后:大概就是这个效果了,点击一下改变背景色 鼠标释放颜色消失


你可能感兴趣的:(CSS移动端实现PC端长按:active效果(改变背景色))