在ipad問題上懸停狀態

我有一個砌體佈局，每個單元格實際上是一個超鏈接，需要顯示懸停狀態。在ipad問題上懸停狀態

在ipad上（如預測）懸停狀態沒有顯示。客戶端已要求該鏈接現在應該需要兩次點擊：一次顯示懸停狀態，第二次點擊搞的超級鏈接 - 所以我用這一點JavaScript：

 $(document).ready(function() { 
     $('.my_button').bind('touchstart touchend', function(e) { 
      e.preventDefault(); 
      $(this).toggleClass('hover_effect'); 
     }); 
    });

現在的問題是，在ipad懸停狀態現在顯示（這很棒），但第二次點擊被忽略，並且什麼都不做。

您可以在http://mayce.derringer.com.au/residential/

來源

2017-03-05 shanDB

The problem now is that on ipad the hover states now display (which is great), but the second click is being ignored and does nothing.

查看實時本站

e.preventDefault();

您阻止默認行爲，這樣的點擊/觸摸將永遠無法跟隨鏈接。嘗試像這樣

$(document).ready(function() { 
     $('.my_button').bind('touchstart touchend', function(e) { 
      if($(this).hasClass('hover_effect') { 
       return; // skip rest of code, so default will happen 
         // which is following the link 
      } 
      e.preventDefault(); 
      $(this).addClass('hover_effect'); // no reason to toggleClass 
              // cause the seccond click/touch should always go to destination 
     }); 
    });

現在可能是你想要它的是，如果你需要刪除hover_effect到不同的$('.my_button')點擊/觸摸所有其他my_button(s)所以加

$('.my_button').not(this).removeClass('hover_effect');

像這樣

$(document).ready(function() { 
     $('.my_button').bind('touchstart touchend', function(e) { 
      $('.my_button').not(this).removeClass('hover_effect'); 
      if($(this).hasClass('hover_effect') { 
       return; // skip rest of code 
      } 
      e.preventDefault(); 
      $(this).addClass('hover_effect'); // no reason to toggleClass 
              // cause the seccond click/touch should always go to destination 
     }); 
    });

我還沒有嘗試過代碼，但它應該可以工作。讓我知道如果它不。

來源

2017-03-05 13:51:26 caramba

謝謝你們的迴應，但遺憾的是它沒有工作。您的解決方案似乎將按鈕的行爲恢復爲原始問題：它會在第一次單擊時激活超鏈接。沒有顯示懸停狀態。 – shanDB

@shanDB好吧，那麼請同時分享您的HTML和CSS – caramba

錯誤：'{ 「消息」：「Uncaught SyntaxError：Unexpected token {」，「filename」：「http://stacksnippets.net/js」，「lineno」：15，「colno」：47 } –

一點點研究，我想出了這個解決方案，它的工作原理：

jQuery(document).ready(function(){ 
    $('.middle').bind('touchstart touchend', function(e) { 
     //This will return true after the first click 
     //and preventDefault won't be called. 
     if(!$(this).hasClass('nav_returnlink')) 
      e.preventDefault(); 

     $(this).addClass('nav_returnlink'); 
    }); 
});

來源

2017-03-06 11:52:37 shanDB

在ipad問題上懸停狀態

回答

相關問題