問題描述

現(xiàn)在有一個列表頁。是有l(wèi)i 組成的。如下

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

在手機(jī)上點擊的時候希望有些反饋。所以就加了下面的css

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

但是在移動端滑動的時候，手指觸摸到這些li節(jié)點上的時候也會變色。請問怎么處理可以只是點擊的時候觸發(fā)背景色改變。而在滑動的時候不觸發(fā)背景色改變呢？

問題解答

最好的辦法還是使用js吧。使用一個延時函數(shù)，自動去除添加背景色的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：

似乎應(yīng)該是這樣？

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

手機(jī)答題，代碼并沒測試過，不過如果用css感覺是這樣寫的；或者直接用js也行。