禁用雙擊來點擊觸摸屏iOS設備

所以，最近我一直在一個網站上，讓我改進和作出迴應，我面臨的問題之一是有許多可點擊的元素，CSS和jQuery混合效果用於懸停狀態。禁用雙擊來點擊觸摸屏iOS設備

現在，我首先希望所有這些懸停狀態都是CSS，但我遇到的主要問題是在這些懸停狀態下，某些元素正在改變display和visibility css屬性。我做了一些閱讀，顯然，如果是這種情況，在觸摸屏iOS設備上，這會導致第一次「觸摸」強制懸停狀態，然後需要第二次點擊來實際點擊元素。

我試圖找到一個解決方案，不需要大量的標記和樣式更改。最好是修復jQuery/JavaScript的修復。

我已經試過如下：

$(document).ready(function() { 
    $('a').on('click touchend', function(e) { 
     var el = $(this); 
     var link = el.attr('href'); 
     window.location = link; 
    }); 
});

然而，這當用戶將他們的手指下一個可點擊的元素，並拖動頁面滾動有問題。當他們在拖動後鬆開手指時，window.location仍然被更改。

如果需要，我會在稍後添加一個jsFiddle。

在此先感謝。

編輯：

這是一個顯示問題的jsFiddle。 http://jsfiddle.net/0bj3uxap/4/ 如果你點擊其中一個塊，你會看到它顯示懸停狀態，然後你需要再次點擊來實際觸發點擊事件。

它似乎發生在元素被隱藏，然後懸停狀態顯示元素。

來源

2015-11-25 Daniel Dewhurst

看起來像我找到了解決方案。

https://github.com/ftlabs/fastclick

FastClick解決這個問題，並與一些移動瀏覽器中刪除300ms的延遲問題。

就包括<script>標籤庫中，然後啓動它使用jQuery，或任何你喜歡的：

$(document).ready(function() { 
    FastClick.attach(document.body); 
});

只是爲什麼會出現這個問題簡單介紹一下：

當一個元素是隱藏的，例如，當它具有以下任何一個CSS屬性：

display: none; 
opacity: 0; 
visibility: hidden;

而HOV呃隱藏元素的狀態然後顯示元素，iOS在第一次觸摸時不觸發點擊事件，它強制懸停狀態（顯示元素）。然後用戶需要再次觸摸該元素才能觸發點擊事件。

我明白了爲什麼添加了這個內容，但我想我寧願iOS沒有這樣做，然後開發人員只需要調整他們的網站以避免隱藏內容。

來源

2015-11-26 13:49:11

非常感謝CSS類。這對我來說很有用。我的問題是：我必須點擊標籤上的兩次來激活其在iPad上的鏈接。 – binhdocco

我有一個非常類似的問題在IOS不得不雙擊標籤按鈕等我刪除了所有的桌面樣式，其中包括一些懸停樣式這沒有什麼區別。我將懸停樣式放回到移動UI中未使用的樣式中。在隨後結束的問題是所謂的

.error消息

修正原來這個CSS已經在我們的UI被使用，它被連接到一個鼠標懸停事件

來源

2016-08-05 09:06:32 Paul

禁用雙擊來點擊觸摸屏iOS設備

回答

相關問題