jquery – Bootstrap按钮在移动设备上“卡住”

前端之家收集整理的这篇文章主要介绍了jquery – Bootstrap按钮在移动设备上“卡住”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
每当我点击一个按钮,我的移动设备( android)在一个twitter boostrap按钮,但按钮获得奇怪的样式,如鼠标仍然结束,直到我单击另一个元素才释放.这不是应用于元素的活动类.

这是微妙但非常烦人的,特别是当我尝试应用风格的按钮,他们不显示,直到我点击不同的元素.

尝试在移动设备上使用http://twitter.github.com/bootstrap/base-css.html#buttons,然后点击一个按钮,你会看到我的意思

我尝试用jquery触发各种事件,但没有任何工作,这是我在javascript的END中的一个代码

$(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;
 }

解决方法

我通过在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;
}

猜你在找的jQuery相关文章