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也行。