Nút Bootstrap bị "kẹt" trên thiết bị di động

Question

Bất cứ khi nào tôi nhấp vào nút bằng thiết bị di động của tôi (android) trên nút tăng tốc twitter nhưng nút được tạo kiểu lạ như chuột vẫn chưa kết thúc và không phát hành cho đến khi tôi nhấp vào một nút khác thành phần. Đây không phải là lớp đang hoạt động được áp dụng cho một phần tử.

Đó là tinh tế nhưng rất khó chịu, đặc biệt là khi tôi cố gắng áp dụng phong cách nút họ không xuất hiện cho đến khi tôi click vào một yếu tố khác nhau.

Hãy thử sẽ http://twitter.github.com/bootstrap/base-css.html#buttons trên một thiết bị di động và bấm vào một nút, bạn sẽ thấy những gì tôi có nghĩa là

tôi đã cố gắng kích hoạt tất cả các loại sự kiện với jquery nhưng không làm việc, đây là một đoạn tôi có vào cuối javascript tôi

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


     }); 

và cố trọng stylings css trên di chuột

.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

tôi cố định vấn đề này bằng cách thêm một lớp học để các nút trên touchend event và sau đó ghi đè lên vị trí nền bootstrap mặc định.

javascript:

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

css:

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

Answer 2

Nếu bạn chỉ phát triển cho điện thoại di động thì bạn có thể chỉ đơn giản là ghi đè lên css di chuột hoàn toàn, ví dụ:

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