为什么/当我必须敲击两次触发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上

回答

相关问题