css - 请问在移动端解决li:active滑动的时候不改变背景色

问题描述

现在有一个列表页。是有li 组成的。如下

<li>你好</li><li>你好</li><li>你好</li><li>你好</li>

在手机上点击的时候希望有些反馈。所以就加了下面的css

li:active{ background-color:#ddd;}

但是在移动端滑动的时候，手指触摸到这些li节点上的时候也会变色。请问怎么处理可以只是点击的时候触发背景色改变。而在滑动的时候不触发背景色改变呢？

问题解答

最好的办法还是使用js吧。使用一个延时函数，自动去除添加背景色的class

.active{ background-color:#ddd;}

$(’li’).on(’click’, function (e) { var _this = this; $(_this).addClass(’active’); setTimeout(function () {$(_this).removeClass(’active’); }, 150);});回答2：

移动端滑动事件是touchmove，或许你可以在这上面做做文章。一种方案，去掉:active，改为js事件控制

el.addEventListener(’touchstart’,function(){ //加背景色})el.addEventListener(’touchend’,function(){ //移除背景色})el.addEventListener(’touchmove’,function(){ //如果有背景色，就移除})回答3：

似乎应该是这样？

body:active li:active,li { background-color: initial;}li:active{ background-color: #ddd;}

手机答题，代码并没测试过，不过如果用css感觉是这样写的；或者直接用js也行。