有用 bootstrap 的大佬不? button 按下之后就一直处于激活状态,如何恢复默认状态?

294 天前
 langhuishan

给孩子做了个口算网页,用了 JQ+bootstrap 点击按钮作为回答。电脑端用网页还好,用手机打开网页,按钮按下之后,再次出题时,前面按过的按钮就一直处于激活状态,比较容易误导孩子。 百度,google 了一堆,要么是$(this).removeClass("active") 要么是$(this).blur(),试来试去,总是不行 想问下怎么实现每次出题时候这些按钮都处在默认状态?

1214 次点击
所在节点    JavaScript
3 条回复
com781517552
294 天前
这是移动端触发了 hover 吧
com781517552
294 天前
document.getElementById('myButton').addEventListener('touchstart', function() {
this.classList.add('active');
});

document.getElementById('myButton').addEventListener('touchend', function() {
this.classList.remove('active');
});
erhsilence
294 天前
一楼应该是对的,移动端网页是点击后光标就一直在上次点击的地方了,所以会持续触发 hover ,你可以把 hover 的样式去掉或者使用 @media (hover: hover)
参考: https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1014625

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX