为什么/什么时候我必须点击两次才能触发iOS上的点击?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (8)
  • 关注 (0)
  • 查看 (1922)

我在iOs 6.0上看移动Safari。 我似乎无法建立任何押韵的原因,当点击一个元素将触发点击。 在很多情况下,似乎我需要点击一次触发悬停,然后再次触发点击

Mobile Safari规范说:“...单手指和双手指手势生成的事件流是有条件的,取决于所选元素是可点击还是可滚动的...可点击元素是链接,表单元素 ,图像地图区域,或任何其他元素与鼠标移动,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上,第一个点击充当悬停,第二个点击充当单击。

可以通过添加这个jQuery脚本来删除它。

$('a').on('click touchend', function(e) { var el = $(this); var link = el.attr('href'); window.location = link; });

用户回答回答于
用户回答回答于
$('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);
    }
});
用户回答回答于

我解决了这个问题,首先检测它是否是iPhone,然后将mouseup事件绑定到我试图调用的函数。

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){ 
    $('foo').on('mouseup', function(){
        ...
    }
}

我尝试过其他的活动,但鼠标似乎效果最好。即使用户试图滚动,其他事件(如Touchend)也在触发。如果你触碰后拖动手指,Mouseup似乎不会被炒鱿鱼。

iPhone的检测归功于DavidWalsh(和ESPN)。http://davidwalsh.name/test-iphone

用户回答回答于

我在使用Bootstrap时遇到了这个问题,我发现罪魁祸首是工具提示。从按钮中删除工具提示,就不需要再点击它两次了。

用户回答回答于

如果元素“Display:None”处于正常状态,“Display:Block;”或内联块处于“悬停”状态,IOS将触发悬停事件。

用户回答回答于

最简单的解决方案不是绑定iOS上的“mouseenter”事件(或任何支持触摸的目标平台)。 如果没有绑定,则悬停事件不会被触发,并在第一次敲击时触发点击。

所属标签

可能回答问题的人

  • 应用案例分享

    1 粉丝490 提问5 回答
  • uncle_light

    5 粉丝518 提问4 回答
  • o o

    4 粉丝495 提问4 回答
  • 学生

    8 粉丝476 提问3 回答

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动