给孩子做了个口算网页,用了 JQ+bootstrap 点击按钮作为回答。电脑端用网页还好,用手机打开网页,按钮按下之后,再次出题时,前面按过的按钮就一直处于激活状态,比较容易误导孩子。 百度,google 了一堆,要么是$(this).removeClass("active") 要么是$(this).blur(),试来试去,总是不行 想问下怎么实现每次出题时候这些按钮都处在默认状态?
1
com781517552 300 天前 1
这是移动端触发了 hover 吧
|
2
com781517552 300 天前 1
document.getElementById('myButton').addEventListener('touchstart', function() {
this.classList.add('active'); }); document.getElementById('myButton').addEventListener('touchend', function() { this.classList.remove('active'); }); |
3
erhsilence 300 天前
一楼应该是对的,移动端网页是点击后光标就一直在上次点击的地方了,所以会持续触发 hover ,你可以把 hover 的样式去掉或者使用 @media (hover: hover)
参考: https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices |