jquery - 引导按钮在移动设备上“卡住”

Question

每当我使用移动设备（android）在 twitter boostrap 按钮上单击按钮时，按钮的样式就会变得奇怪，就像鼠标仍然在上方并且在我单击另一个元素之前不会释放。这不是应用于元素的活动类。

这很微妙但很烦人，尤其是当我尝试将样式应用于按钮时，它们直到我单击不同的元素才会显示。

尝试在移动设备上访问http://twitter.github.com/bootstrap/base-css.html#buttons并单击一个按钮，您会明白我的意思

我尝试用 jquery 触发各种事件，但没有任何效果，这是我在我的 javascript 结尾处的一个片段

$(document).on('tapclick', '.btn', function() {
          $(this).blur(); 
          $(this).trigger('mouseup'); 


        });

并尝试在悬停时覆盖 CSS 样式

.btn a:hover,.btn a:link,.btn a:visited,.btn a:active{
text-decoration: none !important;
cursor: default !important;
background-color: transparent !important;
background-image: none !important;
 }

Answer 1

如果您只是为移动设备开发，那么您可以简单地完全覆盖悬停 css，例如：

.btn:hover {
    background-color: inherit;
}

Answer 2

我通过在 touchend 事件的按钮上添加一个类，然后覆盖默认的引导程序背景位置来解决这个问题。

javascript:

$("button").on("touchstart", function(){ 
    $(this).removeClass("mobileHoverFix");
});
$("button").on("touchend", function(){ 
    $(this).addClass("mobileHoverFix");
});

CSS：

.mobileHoverFix:hover,
.mobileHoverFix.hover{
    background-position: 0 0px;
}