Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >点击按钮背景变灰色,松开恢复原来色

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

作者头像
砖业洋__
发布于 2023-05-06 12:14:10
发布于 2023-05-06 12:14:10
52402
代码可运行
举报
文章被收录于专栏:博客迁移同步博客迁移同步
运行总次数:2
代码可运行

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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
代码运行次数:0
运行
AI代码解释
复制
<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反应更灵敏)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-06-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验