問題描述

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

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

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

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

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

問題解答

最好的辦法還是使用js吧。使用一個(gè)延時(shí)函數(shù)，自動(dòng)去除添加背景色的class

.active{ background-color:#ddd;}

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

移動(dòng)端滑動(dòng)事件是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ī)答題，代碼并沒測(cè)試過，不過如果用css感覺是這樣寫的；或者直接用js也行。