点击按钮背景变灰色，松开恢复原来色

点赞再看，养成好习惯～～～～

demo有的页面有100多个列表项，需要点击列表项的时候背景变灰色，松开后背景恢复原来色，这个样式加上才让人更清楚地看到是点击的哪一个按钮，视觉友好。

最初的时候我是想用js逻辑去修改样式，如果点击了，那么就改为灰色，松开后，再改为白色。结果demo有100多个列表项，我也不可能加上100多个监听，我突然想起以前学的事件代理，然后就实践了一把。出现了如下代码

<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去操作。

<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反应更灵敏）

关注、留言，我们一起学习。

===============Talk is cheap, show me the code================