同一 DIV 上的 jQuery 悬停/单击事件（移动设备）答案

【问题标题】：jQuery Hover/Click event on same DIV (Mobile Devices)同一 DIV 上的 jQuery 悬停/单击事件（移动设备）
【发布时间】：2012-06-27 03:14:29
【问题描述】：

我编写了一个在图像上显示圆圈的简单脚本。

当您将鼠标悬停在一个圆圈上时，它会展开为一个工具提示。

$('div.tooltip').live({mouseenter:function(e){
... animate tooltip open;
},mouseleave:function(e){
... animate tooltip closed;
}});

除移动设备外，一切正常。当我点击圆圈打开工具提示时，它会触发click 事件并完全绕过mouseenter/mouseexit 事件。任何想法将不胜感激:) 谢谢

【问题讨论】：

用户将如何“悬停”在带有触摸屏设备的元素上？
这是因为当您点击圆圈打开工具提示时，它应该触发 click 事件。
好的，我正在寻找一种替代方法/解决方法来解决这个问题，而不必过多地削减代码或添加插件。在点击事件中（简化代码）： if(mobile_device){ $('div.tooltip').trigger('mouseenter'); } else { ... 做你正常的桌面任务... };这有效，现在将在点击移动设备时打开工具提示，并在其他地方正常运行（悬停时打开工具提示）。剩下的最后一件事是弄清楚如何在移动设备上单击工具提示以打开灯箱....
使用 if 语句并在点击时向“this”添加一个类，因此它的工作原理如下：点击时 if(has class){do this} else (show tooltip) then (add class)

【解决方案1】：

由于触摸屏设备的性质，它们根本不支持悬停事件。在这方面您可以做的最好的事情是使用支持手势的 jquery 插件并使用单击和双击事件，否则您需要将工具提示放在其他地方并使其始终可见或有一个单独的按钮激活提示...或者您可以这样做，以便第一次单击激活压力，然后下一次单击激活第二个功能。

【讨论】：