logo标签列表

为什么/何时在iOS上需要点击两次才能触发点击

iosmobileclicktouchtap
42

好的，我感觉自己有点疯了...

我正在使用iOS 6.0上的移动Safari浏览器。似乎不能确定点击元素何时会触发click事件。在许多情况下，似乎我需要点击一次才能触发hover效果，再点击一次才能触发click事件。

Mobile Safari规范中写道："......由一个手指和两个手指手势生成的事件流取决于所选元素是否可点击或可滚动......可点击元素是链接、表单元素、图像映射区域或具有mousemove、mousedown、mouseup或onclick处理程序的任何其他元素......由于这些差异，您可能需要将一些元素更改为可点击元素......"

文档还建议开发者“......添加一个虚拟的onclick处理程序，即onclick=“void(0)”，以便Safari在iOS上将span元素识别为可点击元素。”

但是，我的测试结果表明这些说法是错误的。

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

html

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

JavaScript

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

尝试在iPad上点击元素，没有反应

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

究竟是什么标准决定了在第一次点击元素时会触发“click”事件？ 而不是在第一次点击时触发“hover”事件，第二次点击时触发“click”事件。

在我的测试中，锚点元素是我唯一可以偶尔和不一致地在第一次点击时触发点击的元素。

这就是我开始感到疯狂的地方。 我搜遍了互联网，几乎没有关于这个问题的任何信息。 就只有我吗?! 有人知道是否有讨论过两次点击的标准或处理这些限制的方法吗？

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

谢谢！

是的，苹果的onclick建议仍然无法正常工作（iOS模拟器）:-( - Simon H
12个回答
-1

好的，我知道这可能不是最佳实践，但我刚刚监听了触摸事件并点击了被触摸的元素。

html.addEventListener('touchstart', function(e) {
// get the element that was clicked
var element = e.target;
// create the click event if it happens inside where you want it to 
if(element.closest('.where')) {
    element.click();
}
return});
-2
我在Google上搜索了一下，看看能否帮到你，结果找到了这段代码。尝试修改它以符合你的喜好，并查看是否可以实现你想要的功能。如果你不理解它，让我知道，我会详细解释。我在这里找到了更多相关内容：

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);
    }
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接