为什么/何时必须点击两次以触发iOS上的点击

好吧，我觉得我疯了…

我在iOs 6.0上看移动Safari。 我似乎无法build立任何押韵的原因，当点击一个元素将触发点击。 在很多情况下，似乎我需要点击一次触发hover，然后再次触发点击。

Mobile Safari规范说：“…单手指和双手指手势生成的事件stream是有条件的，取决于所选元素是可点击还是可滚动的…可点击元素是链接，表单元素，图像地图区域，或任何其他元素与鼠标移动，mousedown，mouseup，或onclick处理程序…由于这些差异，您可能需要将您的元素更改为可点击的元素…“

它继续build议开发者“…添加一个虚拟onclick处理程序，onclick =”void（0）“，以便iOS上的Safari将span元素识别为可点击的元素。

但是，我的testing显示这些陈述是错误的。

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

HTML

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

JS

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

尝试点击iPad上的元素。 什么都没发生

但是我离题了。 对我来说重要的是找出以下问题：

确切地说，什么是判断什么时候点击一个元素将触发一个“点击”事件的第一个水龙头？ 而不是在第一次点击时触发“hover”事件，在第二次敲击时点击“点击”事件。

在我的testing中，锚点元素是我可以在第一个水龙头上触发点击的唯一元素，然后，只是偶尔和不一致。

这是我开始感到疯狂的地方。 我在网上search了很多，几乎找不到这个问题。 只有我吗？！ 是否有人知道在哪里讨论过双击的标准或处理这些限制的方法？

我很乐意回答问题/要求。

谢谢！

Answer 1

我有同样的问题。 最简单的解决scheme不是绑定iOS（或任何支持触摸的目标平台）上的“ mouseenter ”事件。 如果没有绑定，则hover事件不会被触发，点击会在第一次敲击时被触发。

Answer 2

如果元素是“display：none;”，则iOS将触发hover事件。 在正常状态下和“显示：块”; 或内嵌块上：hover。

Answer 3

我使用Bootstrap有这个问题，我发现罪魁祸首是工具提示。 从button中删除工具提示，你不需要再次点击两次。

Answer 4

我解决了这个问题，首先检测它是否是一个iphone，然后绑定mouseup事件到我试图调用的函数。

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

我尝试了其他事件，但mouseup似乎最好。 即使用户正在尝试滚动，其他类似touchend的事件也会被触发。 触摸后拖动手指，Mouseup似乎不会被解雇。

信用大卫沃尔什（和ESPN）的iPhone检测。 http://davidwalsh.name/detect-iphone

Answer 5

我正在search，看看我能不能帮你find一些代码。 尝试修改它的喜好，看看你是否可以做你的尝试。 如果你有麻烦理解，让我知道，我会详细阐述。 这里也更多地在这里，我发现它

Jqueryhoverfunction，并在平板电脑上点击

 $('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); } }); 

Answer 6

值得一提的是：'hover'伪类可能会阻止'click'事件的发生。

在移动浏览器中，点击有时用来代替hover动作（例如显示下拉菜单），它们可能会在第一次点击时触发人为的“hover”状态，然后点击第二次点击。

请参阅https://css-tricks.com/annoying-mobile-double-tap-link-issue/以获取详细的解释和示例。

Answer 7

从来没有想出的标准，但这一解决了我的问题立即触发点击一个元素被点击：

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

我不得不对他们的代码进行一些添加/修改，以使其正确工作，让我知道如果您对我的方法感兴趣，我会尝试发表解释。

干杯:)

Answer 8

这些都是因为在iOS上，第一个水龙头作为hover，第二个水龙头作为点击。

你可以通过添加这个jQuery脚本来删除它。

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