demo有的页面有100多个列表项，需要点击列表项的时候背景变灰色，松开后背景恢复原来色，这个样式加上才让人更清楚地看到是点击的哪一个按钮，视觉友好。
最初的时候我是想用js逻辑去修改样式，如果点击了，那么就改为灰色，松开后，再改为白色。结果demo有100多个列表项，我也不可能加上100多个监听，我突然想起以前学的事件代理，然后就实践了一把。出现了如下代码
代码语言：javascript复制<script>
.....
let ul = document.getElementById("ul_content");
ul.addEventListener('touchstart',function(e){
var ev = ev || e;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == 'li'){
target.style.backgroundColor = "rgb(240, 240, 240)";
}
})
ul.addEventListener('touchend',function(e){
var ev = ev || e;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == 'li'){
target.style.backgroundColor = "white";
}
})
</script>
...
<ul id="ul_content">
<li>这是li11111</li>
<li>这是li22222</li>
<li>这是li33333</li>
<li>这是li44444</li>
</ul>只要是li标签，在移动端点击的时候就是改为灰色，松开就是白色。写完自我感觉还不错，还把事件代理复习了一波。
结果后来发现，能用css就别用js操作，那么好的写法来了，不用js去操作。
代码语言：javascript复制<style>
#click-style > * :active {
background-color: rgb(240, 240, 240);
}
</style>
<ul id="click-style">
<li>这是li11111</li>
<li>这是li22222</li>
<li>这是li33333</li>
<li>这是li44444</li>
</ul>选择器和伪类用起来岂不是更棒？
如果ul上面有其他样式导致click-style无效的话，在ul外包裹一层div，在div上绑定click-style的id选择器即可。
我在微信x5、safari、chrome测试都可以，android和ios这么写都是没问题的。（不知道是不是视觉原因，我觉得ios比android反应更灵敏）
