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

点赞再看,养成好习惯~~~~

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================

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页