好的，我觉得我疯了......
我正在关注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上的元素。 什么都不会发生
但我离题了。对我来说重要的是找出以下问题：
确定点击某个元素的标准在第一次点按时会触发“点击”事件的确切条件是什么？与在第一次点按时触发“悬停”事件相反点击第二次点击'事件。
在我的测试中，锚点元素是我可以在第一次点击时点击点击的唯一元素，然后，只是偶尔和不一致。
这是我开始感到疯狂的地方。我在网上广泛搜索，发现这个问题几乎没有。只有我吗？！有没有人知道哪里有关于双击标准和/或处理这些限制的方法的讨论？
我很乐意回答问题/要求。
谢谢！
答案 0 :(得分：10)
我有同样的问题。最简单的解决方案是不在iOS（或任何支持触摸的目标平台）上绑定“ mouseenter ”事件。如果没有绑定，则不会触发悬停事件，并在第一次点击时触发点击。
答案 1 :(得分：7)
如果元素为“display：none;”，iOS将触发悬停事件在正常状态和“显示：块;”或内联阻止：悬停。
答案 2 :(得分：3)
我使用Bootstrap遇到了这个问题，我发现罪魁祸首是工具提示。从按钮中删除工具提示，您不再需要再点击两次。
答案 3 :(得分：3)
值得一提的是：＆＃39;：hover＆＃39;伪类可以防止点击＆＃39;解雇事件。
在移动浏览器中，点击有时用于替换悬停操作（例如显示下拉菜单），它们可能会触发人为的“悬停”操作。首次点击状态，然后点击第二个点击。
有关详细说明和示例，请参阅https://css-tricks.com/annoying-mobile-double-tap-link-issue/。
答案 4 :(得分：1)
我首先检测它是否是iphone，然后将mouseup事件绑定到我试图调用的函数，从而解决了这个问题。
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){
$('foo').on('mouseup', function(){
...
}
}
我尝试过其他活动但是mouseup似乎效果最好。即使用户试图滚动，其他事件如touchend也会被触发。如果在触摸后拖动手指，鼠标似乎不会被触发。
感谢David Walsh（和ESPN）的iPhone检测。 http://davidwalsh.name/detect-iphone
答案 5 :(得分：0)
我正在谷歌上搜索，看看我是否可以帮助你一些并找到这段代码。尝试将其修改为您的喜好，看看您是否可以按照您的尝试进行操作。如果你有麻烦理解它让我知道，我会详细说明。还有更多它在我发现它
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);
}
});
答案 6 :(得分：0)
显示：无;上面提到的解决方案适用于iOS（未在9.3.5之后进行测试），但不适用于Android。
一个hacky css-only解决方案是使用减去z-index隐藏元素下方的链接，并使链接达到正z-index on：hover或first-touch（具有小的转换延迟）。我想用css translate而不是z-index可以获得相同的结果。适用于iOS和Android。
通过这种方式，您可以在第一次点击时在触摸屏设备上的链接上显示悬停效果，而无需激活网址，直到第二次点击。
答案 7 :(得分：0)
我的解决方案是从css中删除：悬停状态，当你考虑它时，移动浏览器不应该有：悬停状态，因为没有悬停..
如果要将悬停状态保持在桌面上，可以使用媒体查询，如下所示：
.button {
background: '#000'
}
@media (min-width: 992px) {
.button:hover {
background: '#fff'
}
}
答案 8 :(得分：0)
@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的{{1}}，<span>，first tap is hover and second tap is click ：https://css-tricks.com/annoying-mobile-double-tap-link-issue/
@media (hover)不能像手写笔输入，触摸式台式机和移动设备那样对概念进行完全不同的解释。
答案 9 :(得分：0)
您可以在元素上使用ontouchstart而不是onclick事件，并在输入该元素时调用focus（）函数：
document.getElementById('plain-div').addEventListener('touchstart', function() {
//write body of your function here
alert(“hi”);
// if input needs double tap
this.focus();
});
答案 10 :(得分：-1)
永远不会想出这个标准，但这样就可以在点击元素时立即触发点击来解决我的问题：
https://developers.google.com/mobile/articles/fast_buttons
我必须对其代码进行一些添加/修改以使其正常工作，如果您对我的方法感兴趣，请告诉我，我会尝试发布解释。
干杯：）
答案 11 :(得分：-1)
这些都是因为在iOS上，第一次点击充当悬停，第二次点击充当点击。
你可以通过添加这个jQuery脚本来删除它。
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});