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

Question

好吧我觉得我疯了

我正在看iOs 6.0上的Mobile Safari.我似乎无法确定任何押韵或理由,因为点击元素会触发点击.在许多情况下,似乎我需要点击一次以触发悬停,然后再次触发点击.

的移动Safari规范说:" ...由一个手指和两手指手势生成的事件的流动是有条件的根据所选的元素是否是可点击或滚动...一个可点击的元件是一个链接,表格元件,图像映射区域或使用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上点击元素. 什么都没发生

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

确切地说,点击元素时确定的标准是什么？会在第一次点击时触发"点击"事件？ 而不是在第一次点击时触发"悬停"事件,在第二次点击时触发"点击"事件.

在我的测试中,锚元素是我可以在第一次点击时触发点击的唯一元素,然后,仅偶尔和不一致.

这是我开始感到疯狂的地方.我在网上广泛搜索,发现这个问题几乎没有.只有我吗？!有没有人知道哪里有关于双击标准和/或处理这些限制的方法的讨论？

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

谢谢!

Answer 1

我有同样的问题.最简单的解决方案是不要在iOS(或任何支持触摸的目标平台)上绑定' mouseenter '事件.如果未绑定,则不会触发悬停事件,并在第一次点击时触发点击.

Answer 2

如果元素是"display:none;",iOS将触发悬停事件 在正常状态和"显示:块;" 或内联阻止:悬停.

Answer 3

我在谷歌上搜索，看看是否可以帮助你，并找到了这段代码。尝试根据您的喜好对其进行修改，看看是否可以实现您想要的效果。如果您在理解时遇到困难，请告诉我，我会详细说明。我在这里找到的还有更多内容

Jquery悬停功能并在平板电脑上点击

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