现在有一个列表页。是有li 组成的。如下
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>在手机上点击的时候希望有些反馈。所以就加了下面的css
li:active{
background-color:#ddd;
}但是在移动端滑动的时候，手指触摸到这些li节点上的时候也会变色。请问怎么处理可以只是点击的时候触发背景色改变。而在滑动的时候不触发背景色改变呢？
PHPzhong2017-04-17 14:37:31
最好的办法还是使用js吧。使用一个延时函数，自动去除添加背景色的class
.active{
background-color:#ddd;
}$('li').on('click', function (e) {
var _this = this;
$(_this).addClass('active');
setTimeout(function () {
$(_this).removeClass('active');
}, 150);
});
PHP中文网2017-04-17 14:37:31
移动端滑动事件是touchmove，或许你可以在这上面做做文章。一种方案，去掉:active，改为js事件控制
el.addEventListener('touchstart',function(){
//加背景色
})
el.addEventListener('touchend',function(){
//移除背景色
})
el.addEventListener('touchmove',function(){
//如果有背景色，就移除
})
PHP中文网2017-04-17 14:37:31
似乎应该是这样？
body:active li:active,
li {
background-color: initial;
}
li:active{
background-color: #ddd;
}手机答题，代码并没测试过，不过如果用css感觉是这样写的；或者直接用js也行。