自举按钮获得“卡住”在移动设备上 [英] Bootstrap buttons get "stuck" down on mobile devices
问题描述
每当我点击一个按钮,我的移动设备(android)在一个twitter boostrap按钮,但按钮得到奇怪的样式,如鼠标仍然结束,直到我单击另一个元素才释放。这不是应用于元素的活动类。
Whenever I click a button with my mobile device (android) on a twitter boostrap button but button gets odd styling like the mouse is still over and doesn't release until I click another element. This is not the active class being applied to an element.
这是微妙但非常烦人的,特别是当我尝试将样式应用于他们不显示的按钮,直到我点击不同的元素。
It's subtle but very annoying, especially when I try to apply styles to the button they dont show up until i click on a different element.
尝试 http://twitter.github.com/bootstrap/base- css.html#按钮在移动设备上,点击一个按钮,你会看到我的意思
Try going to http://twitter.github.com/bootstrap/base-css.html#buttons on a mobile device and click a button you'll see what i mean
我尝试用jquery触发各种事件,但没有工作,这是我在javascript的结尾的代码片段
I tried triggering all sorts of events with jquery but nothing worked, this is a snippet i have at the END of my javascript
$(document).on('tapclick', '.btn', function() {
$(this).blur();
$(this).trigger('mouseup');
});
,并尝试在悬停上覆盖css样式
and tried overriding css stylings on hover
.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;
}
推荐答案
一个类到触摸事件的按钮,然后覆盖默认引导背景位置。
I fixed this problem by adding a class to the button on the touchend event and then overriding the default bootstrap background position.
javascript:
javascript:
$("button").on("touchstart", function(){
$(this).removeClass("mobileHoverFix");
});
$("button").on("touchend", function(){
$(this).addClass("mobileHoverFix");
});
css:
.mobileHoverFix:hover,
.mobileHoverFix.hover{
background-position: 0 0px;
}
这篇关于自举按钮获得“卡住”在移动设备上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!