iPad/iPhone悬停问题导致用户双击链接

Question

我有一些我以前建立的网站,使用jquery鼠标事件...我只是有一个ipad,我注意到所有鼠标悬停事件都是通过点击转换...所以例如我必须做两次点击而不是一次..(第一次悬停,比实际点击)

有解决方法吗？也许是一个jquery命令我shoudl已经使用而不是鼠标悬停/出去等..谢谢!

Answer 1

没有完全测试这个,但是因为iOS触发了触摸事件,这可能会起作用,假设你处于jQuery设置中.

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

我们的想法是Mobile WebKit touchend在敲击结束时触发事件,因此我们会监听该事件,然后touchend在链接上触发事件后立即重定向浏览器.

Answer 2

目前还不完全清楚你的问题是什么,但如果你只想消除双击,同时保留鼠标的悬停效果,我的建议是:

• 添加悬停效果touchstart和mouseenter.
• 删除悬停效果mouseleave,touchmove和click.

背景

为了模拟鼠标,如果用户在触摸屏上触摸并释放手指(如iPad),Webkit移动等浏览器会触发以下事件(来源:html5rocks.com上的触摸和鼠标):

1. touchstart
2. touchmove
3. touchend
4. 300毫秒的延迟,浏览器确保这是一个单击,而不是双击
5. mouseover
6. mouseenter
   • 注:如果一个mouseover,mouseenter或mousemove事件改变页面的内容,以下事件从未被触发.
7. mousemove
8. mousedown
9. mouseup
10. click

似乎不能简单地告诉webbrowser跳过鼠标事件.

更糟糕的是,如果鼠标悬停事件更改了页面内容,则不会触发单击事件,如Safari Web内容指南 - 处理事件中所述,特别是单指事件中的图6.4 .究竟什么是"内容更改",取决于浏览器和版本.我发现对于iOS 7.0,背景颜色的变化不是(或不再是？)内容更改.

解决方案解释

回顾一下:

• 添加悬停效果touchstart和mouseenter.
• 删除悬停效果mouseleave,touchmove和click.

请注意,没有任何操作touchend!

这显然适用于鼠标事件:mouseenter和mouseleave(稍微改进版本的mouseover和mouseout)被触发,并添加和删除悬停.

如果用户实际上click是链接,则也会删除悬停效果.这可确保在用户按下Web浏览器中的后退按钮时将其删除.

这也适用于触摸事件:touchstart添加悬停效果.它是"""不会"""取消了touchend.它再次添加mouseenter,因为这不会导致内容更改(它已经添加),click事件也会被触发,并且跟踪链接而无需用户再次单击!

浏览器在touchstart事件之间延迟300ms 并且click实际上被充分利用,因为悬停效果将在这么短的时间内显示.

如果用户决定取消点击,则手指的移动将正常进行.通常,这是一个问题,因为没有mouseleave事件被触发,并且悬停效果仍然存在.值得庆幸的是,通过删除悬停效果可以很容易地解决这个问题touchmove.

而已!

请注意,可以删除300ms延迟,例如使用FastClick库,但这超出了此问题的范围.

替代方案

我发现以下替代方案存在以下问题:

• 浏览器检测:极易出错.假设设备具有鼠标或触摸功能,而当触摸显示器增加时,两者的组合将变得越来越常见.
• CSS媒体检测:我唯一知道的CSS解决方案.仍然容易出错,并且仍然认为设备有鼠标或触摸,而两者都是可能的.
• 模拟点击事件touchend:这将错误地跟随链接,即使用户只想滚动或缩放,而无意实际点击链接.
• 使用变量来抑制鼠标事件:这将设置一个变量,touchend在后续鼠标事件中用作if条件,以防止在该时间点发生状态更改.该变量在click事件中重置.如果您真的不希望在触摸界面上悬停效果,这是一个不错的解决方案.不幸的是,如果touchend由于其他原因而触发并且没有触发任何点击事件(例如用户滚动或缩放),并且随后尝试使用鼠标跟踪链接(即在具有鼠标和触摸界面的设备上),则此功能不起作用).

进一步阅读

• http://jsfiddle.net/macfreek/24Z5M/.在这个沙箱中为自己测试上面的解决方案.
• http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser.同样的答案,有更多的背景.
• http://www.html5rocks.com/en/mobile/touchandmouse/.html5rocks.com上有关触摸和鼠标的一般背景文章.
• https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html.Safari Web内容指南 - 处理事件.特别参见图6.4,其解释了在事件mouseover或mousemove事件期间内容更改后不会触发其他事件.

另请参阅iPad/iPhone双击问题并禁用移动浏览器上的悬停效果.

Answer 3

似乎毕竟有一个CSS解决方案.Safari等待第二次触摸的原因是您通常在:hover事件上分配的背景图像(或元素).如果没有显示 - 你将不会有任何问题.解决方案是使用辅助CSS文件(或JS方法的样式)来覆盖iOS平台,该文件覆盖:例如,悬停背景以继承,并保持隐藏在鼠标上显示的元素:

这是一个示例CSS和HTML - 鼠标悬停上带有星号标签的产品块:

HTML:

<a href="#" class="s"><span class="s-star"></span>Some text here</a>

CSS:

.s {
   background: url(some-image.png) no-repeat 0 0;

}
.s:hover {
   background: url(some-image-r.png) no-repeat 0 0;
}

.s-star {
   background: url(star.png) no-repeat 0 0;
   height: 56px;
   position: absolute;
   width: 72px;
   display:none;
}

.s:hover .s-star {
   display:block;
}

解决方案(辅助CSS):

/* CSS */
/* Keep hovers the same or hidden */
.s:hover {
   background:inherit;
}
.s:hover .s-star {
   display:none;
}

Answer 4

没必要搞得太复杂。

$('a').on('touchend', function() {
    $(this).click();
});

Answer 5

对我有用的是其他人已经说过的话:

不要在悬停或鼠标移动时显示/隐藏元素(在我的情况下这是事件).

这就是Apple所说的(https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html):

可点击元素是链接,表单元素,图像映射区域或具有mousemove,mousedown,mouseup或onclick处理程序的任何其他元素

如果用户点击可点击元素,则事件按此顺序到达:mouseover,mousemove,mousedown,mouseup和click.此外,如果页面内容在mousemove事件上发生更改,则不会发送序列中的后续事件.此行为允许用户点击新内容.

因此,您可以使用@ woop的解决方案:检测userAgent,检查它是否和iOS设备然后绑定事件.我最终使用这种技术,因为它适合我的需要,更有意义的是当你不想要它时不要绑定悬停事件.

但是......如果你不想弄乱userAgents并且仍然在hover/mousemove上隐藏/显示元素,我发现你可以通过使用原生javascript来实现这一点,如下所示:

$("body").on("mouseover", function() {
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
});

这将适用于桌面版本,并且不会对移动版本执行任何操作.

并获得更多兼容性......

$("body").on("mouseover", function() {
   if (document.getElementsByTagName && document.querySelector) { // check compatibility
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
    } else {
        $(".my-class").show();
        $(".my-selector div").hide();
    }
});