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

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

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

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

js中点击按钮时变色，松开后恢复原来的颜色
js中点击按钮时变色,松开后恢复原来的颜色 // class.active{background: #1AB394;}//js<script type="text/javascript ...
练习：----点击按钮文字变颜色
点击按钮文字变颜色 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
付款页面付款时背景变灰色_在付款和被付款时
付款页面付款时背景变灰色 In the 9 years I have been running edgeofmyseat.com I have issued a large number of inv ...
html 按钮按下变色松开还原,js中怎么写点击按钮时变色，松开后恢复原来的颜色...
满意答案 xuehui988 2013.12.07 采纳率:44% 等级:7 已帮助:761人首先给这个按钮添加鼠标的按下和松开的事件,mousedown,mouseup,使用这两个函数即可. ...
（解决）PHP GD 插入PNG图片后透明背景变灰色
查了很久网上的教程,主要还是两种解答,一种是把背景设置成一种颜色,然后用方法把这种颜色变成透明:另外一种就是设置两个配置,使得最终保存的时候保留透明色. imagealphablending($bac ...
党旗飘飘平台正确打开方法 | JS定时点击按钮
党旗飘飘平台正确打开方法 | JS定时点击按钮背景:最近学校发展对象需要在"党旗飘飘"平台上观看党课视频.而这个平台不支持视频调速,而且时不时跳出来一个按钮,点击后视频才会播放, ...
html 弹窗之后页面变灰色,html点击按钮弹出窗口背景灰掉,点击背景变白退出点击退出也可以...
html点击按钮弹出窗口背景灰掉,点击背景变白退出点击退出也可以 2011-06-10 18:22阅读: 孑孓努力搬砖,养老婆孩子. 关注 function showid(idname){ var ...
点击按钮变色，松开按钮恢复原来的颜色
安卓软件中有这样一种效果:假设一个按钮是绿色,当你点击时变成黄色,松开时又变回绿色.现在介绍怎么实现这种效果第一种方法:资源文件写法在主布局文件中定义一个按钮然后在value文件夹下的color ...
html更改灰色按钮可用,点击提交按钮后按钮变灰色不可用状态的三种方法
第一种方法:直接按钮中加入当点击提交后,提交按钮变灰色不可用,这样可有效防止重复提交,本代码就是实现这样一个功能.从代码就可以看出,我们只需在提交按钮上加入这一句: οnclick="ja ...

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

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

最新文章

热门文章