好吧我觉得我疯了
我正在看iOs 6.0上的Mobile Safari。我似乎无法建立任何押韵或理由，因为点击一个元素会触发点击。在许多情况下，似乎我需要点击一次以触发悬停，然后再次触发点击。
Mobile Safari spec说：“......单指和双指手势产生的事件流是有条件的，取决于所选元素是否可点击或可滚动...可点击元素是链接，表单元素，图像地图区域，或任何其他带有mousemove，mousedown，mouseup或onclick处理程序的元素......由于这些差异，您可能需要将某些元素更改为可单击的元素......“
它继续建议开发人员“...添加一个虚拟onclick处理程序，onclick =”void（0）“，以便iOS上的Safari将span元素识别为可点击元素。”
但是，我的测试表明这些陈述是错误的。
的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上点击元素。什么都没发生
但我离题了。对我来说重要的是找出以下问题：
确切地说，点击元素时确定的标准是什么？会在第一次点击时触发“点击”事件？而不是在第一次点击时触发“悬停”事件，在第二次点击时触发“点击”事件。
在我的测试中，锚元素是我可以在第一次点击时触发点击的唯一元素，然后，仅偶尔和不一致。
这是我开始感到疯狂的地方。我在网上广泛搜索，发现这个问题几乎没有。只有我吗？！有没有人知道哪里有关于双击标准和/或处理这些限制的方法的讨论？
我很乐意回答问题/要求。
谢谢！
我有同样的问题。最简单的解决方案是不要在iOS（或任何支持触摸的目标平台）上绑定'mouseenter'事件。如果未绑定，则不会触发悬停事件，并在第一次点击时触发点击。
从来没有弄清楚标准，但这通过点击元素时立即触发点击解决了我的问题：
https://developers.google.com/mobile/articles/fast_buttons
我不得不对他们的代码进行一些添加/修改以使其正常工作，如果您对我的方法感兴趣，请告诉我，我会尝试发布解释。
干杯:)
如果元素是“display：none;”，iOS将触发悬停事件在正常状态和“显示：块;”或内联阻止：悬停。
我使用Bootstrap解决了这个问题，我发现罪魁祸首是工具提示。从按钮中删除工具提示，您不再需要再点击两次。
值得一提的是'：hover'伪类可能会阻止'click'事件被触发。
与在移动浏览器中一样，click有时用于替换悬停操作（例如显示下拉菜单），它们可能会在第一次单击时触发人为的“悬停”状态，然后处理单击第二次。
有关详细说明和示例，请参阅https://css-tricks.com/annoying-mobile-double-tap-link-issue/。
我通过首先检测它是否是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
我正在谷歌上搜索，看看我是否可以帮助你一些，并找到这段代码。尝试将其修改为您的喜好，看看您是否可以按照您的尝试进行操作。如果你有麻烦理解它让我知道，我会详细说明。在我发现它的地方还有更多
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);
}
});
显示：无;上面提到的解决方案适用于iOS（未在9.3.5之后测试），但不适用于Android。
一个hacky css-only解决方案是使用减去z-index隐藏元素下方的链接，并使链接达到正z-index on：hover或first-touch（具有小的转换延迟）。我想用css translate而不是z-index可以获得相同的结果。适用于iOS和Android。
通过这种方式，您可以在第一次点击时在触摸屏设备上的链接上显示悬停效果，而无需激活网址，直到第二次点按。
我的解决方案是从css中删除：悬停状态，当你考虑它时，移动浏览器不应该有：悬停状态，因为没有悬停..
如果要将悬停状态保持在桌面上，可以使用媒体查询，如下所示：
.button {
background: '#000'
}
@media (min-width: 992px) {
.button:hover {
background: '#fff'
}
}
@media (hover) { /* Your styles */ }据我所知，各种形式的这个问题仍然存在。
在2019年，大多数（如果不是全部）上述情况现在可以使用a CSS only solution进行改善......但是，它需要一些样式表重构。
label {
opacity:0.6
}
label input[type=radio]:checked+span {
opacity:1
}
.myClass::before { } /* Leave me empty to catch all browsers */
a:link { color: blue }
a:visited { color: purple }
a:hover { } /* Leave me empty to catch all browsers */
a:active { font-weight: bold }
/* Your styles */
@media (hover) {
a:hover { color: red }
.myClass::before { background: black }
label:hover {
opacity:0.8
}
}
你可以在这里更详细地阅读为什么Fastclick，:pseudo，<span>，只针对“桌面”分辨率和first tap is hover and second tap is click都使用@media (hover)修复：https://css-tricks.com/annoying-mobile-double-tap-link-issue/
:hover没有提供它曾经做过的清晰度，因为手写笔输入，触摸桌面和移动设备对这个概念有不同的解释。