爲什麼/當我必須敲擊兩次觸發iOS上

我期待在移動Safari瀏覽器在iOS 6.0。我似乎無法建立任何韻律或理由，因爲點擊某個元素時會觸發點擊。在很多情況下，似乎我需要點擊一次觸發懸停，然後再次觸發點擊。

Mobile Safari spec說：「...單指和雙指手勢生成的事件流是有條件的，取決於所選元素是可點擊還是可滾動的......可點擊元素是鏈接，表單元素，圖像映射區域或任何其他具有mousemove，mousedown，mouseup或onclick處理程序的元素...由於這些差異，您可能需要將某些元素更改爲可點擊元素......「

It繼續建議開發人員「......添加一個虛擬onclick處理程序onclick =」void（0）「，以便iOS上的Safari將span元素識別爲可點擊元素。」

但是，我的測試顯示這些陳述是錯誤的。

的jsfiddle：http://jsfiddle.net/6Ymcy/1/

HTML

<div id="plain-div" onclick="void(0)">Plain Div</div>

document.getElementById('plain-div').addEventListener('click', function() { 
    alert('click'); 
});

嘗試點在iPad上的元素。 什麼都沒有發生

但我離題了。對我來說重要的是要找出以下問題：

確切地說，什麼是確定何時點擊一個元素將在第一次點擊激發「點擊」事件？而不是在第一次點擊時觸發「懸停」事件，在第二次點擊時觸發「點擊」事件。

在我的測試中，錨點元素是我可以在第一個水龍頭上觸發點擊的唯一元素，然後只是偶爾和不一致。

這裏是我開始覺得瘋狂的地方。我在網上搜索了很多關於這個問題的信息。只有我嗎？！有沒有人知道在哪裏討論過雙擊標準和處理這些限制的方法？

我很高興回答問題/請求。

謝謝！

來源

2013-07-17 user2383672

是的，Apple的onclick建議仍然沒有實際工作（iOS模擬器）:-( –

我在網上搜了一下，看看我能不能幫你找到一些代碼。嘗試修改它到你的喜好，看看你是否可以做你的嘗試。如果你有麻煩的理解，讓我知道，我會詳細說明。也Theres更給它在這兒，我發現它

Jquery hover function and click through on tablet

$('clickable_element').live("touchstart",function(e){ 
    if ($(this).data('clicked_once')) { 
     // element has been tapped (hovered), reset 'clicked_once' data flag and return true 
     $(this).data('clicked_once', false); 
     return true; 
    } else { 
     // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true 
     e.preventDefault(); 
     $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. 
     $(this).data('clicked_once', true); 
    } 
});

來源

2013-07-17 23:46:52

-1

從來沒有想通了的標準，但這種通過即時觸發點擊一旦一個元素被挖掘解決我的問題：

https://developers.google.com/mobile/articles/fast_buttons

爲了讓它正常工作，我不得不對其代碼進行一些增加/修改，讓我知道如果您對我的方法感興趣，我會嘗試發佈解釋。

乾杯:)

來源

2013-10-16 02:42:19 user2383672

我使用FastClick JS Pplyfill解決了它 - https://github.com/ftlabs/fastclick – JohnA10

此鏈接現在已損壞。 –

@cale_b：http://web.archive.org/web/20140326101523/https://developers.google.com/mobile/articles/fast_buttons –

我有同樣的問題。最簡單的解決方案不是綁定iOS（或任何支持觸摸的目標平臺）上的'mouseenter'事件。如果沒有限制，則懸停事件不會被觸發，並在第一次敲擊時觸發點擊。

來源

2015-04-09 20:16:52

我通過首先檢測它是否是iphone，然後將mouseup事件綁定到我試圖調用的函數來解決此問題。

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){ 
    $('foo').on('mouseup', function(){ 
     ... 
    } 
}

我嘗試了其他事件，但mouseup似乎最好。即使用戶試圖滾動，其他類似touchend的事件也會觸發。如果在觸摸後拖動手指，Mouseup似乎不會被解僱。

感謝David Walsh（和ESPN）的iPhone檢測。 http://davidwalsh.name/detect-iphone

來源

2015-09-02 17:33:30 Frank

這似乎解決了我的問題 - 謝謝。 – ChrisFox

如果元素是「display：none;」，iOS將觸發懸停事件。在正常狀態和「顯示：塊」;或內嵌塊：懸停。

來源

2015-09-22 00:59:23 noahott

你在哪裏閱讀這些信息？你只是節省了我的一天 –

我爲了尋找一百萬個其他問題而奮鬥了幾個小時。在我的例子中，使用Angular ng-switch和ng-show來顯示/隱藏元素（通過改變顯示CSS值） iOS引發的奇怪問題不會觸發點擊。 – Ryan

我在使用Bootstrap時遇到了這個問題，並且我發現罪魁禍首是工具提示。從按鈕中移除工具提示，無需再次點擊兩次。

來源

2015-10-09 14:49:24 sandre89

-1

這些都是因爲在iOS上，第一個水龍頭充當懸停，第二個水龍頭充當點擊。

你可以通過添加這個jQuery腳本來刪除它。

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

來源

2016-11-21 04:08:09 melon24

這也是值得一提的是「：徘徊」僞類可以防止「click」事件燒製而成。

由於在移動瀏覽器中點擊有時用於替代懸停操作（例如顯示下拉菜單），因此它們可能會在第一次點擊時觸發人爲的「懸停」狀態，然後點擊第二次點擊。

查看https://css-tricks.com/annoying-mobile-double-tap-link-issue/瞭解詳細的解釋和例子。

來源

2017-05-30 06:20:58 everyonesdesign

顯示：無;上述解決方案適用於iOS（未在9.3.5之後測試），但不適用於Android。

hacky css-only解決方案是使用負z-index將鏈接隱藏在元素下面，並將鏈接上的正z-索引置於：懸停或第一次觸摸（具有小的轉換延遲）。我想可以用css translate而不是z-index來達到同樣的結果。適用於iOS和Android。

通過這種方式，您可以在第一次點擊時在觸摸屏設備上的鏈接上顯示懸停效果，而不必激活網址直到第二次點擊。

來源

2018-01-03 21:35:14 peterh

爲什麼/當我必須敲擊兩次觸發iOS上

回答

相關問題