V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
langhuishan
V2EX  ›  JavaScript

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

  •  
  •   langhuishan · 300 天前 · 1220 次点击
    这是一个创建于 300 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    3 条回复    2024-02-07 08:49:03 +08:00
    com781517552
        1
    com781517552  
       300 天前   ❤️ 1
    这是移动端触发了 hover 吧
    com781517552
        2
    com781517552  
       300 天前   ❤️ 1
    document.getElementById('myButton').addEventListener('touchstart', function() {
    this.classList.add('active');
    });

    document.getElementById('myButton').addEventListener('touchend', function() {
    this.classList.remove('active');
    });
    erhsilence
        3
    erhsilence  
       300 天前
    一楼应该是对的,移动端网页是点击后光标就一直在上次点击的地方了,所以会持续触发 hover ,你可以把 hover 的样式去掉或者使用 @media (hover: hover)
    参考: https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6074 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 02:40 · PVG 10:40 · LAX 18:40 · JFK 21:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.