2012-06-27 77 views
2

我写了一个简单的脚本,显示在图像上的圆圈。jQuery悬停/点击事件在相同的DIV(移动设备)

  1. 当您将鼠标悬停在圆上时,它会展开为工具提示。

    $('div.tooltip').live({mouseenter:function(e){ 
    ... animate tooltip open; 
    },mouseleave:function(e){ 
    ... animate tooltip closed; 
    }}); 
    
  2. 当你点击打开的工具提示时,它会显示一个包含更多信息的灯箱。

    $('div.tooltip').live('click',function(e){ 
    ... open related lightbox 
    }); 
    

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

+1

用户如何将鼠标悬停在具有触摸屏设备的元素上? –

+0

这是因为当你点击**圆圈打开工具提示时,它应该触发** click **事件。 – undefined

+0

好吧,我正在寻找替代方案/解决方法,以使此工作无需太多的代码太多或添加插件。在点击事件(简化代码)中:if(mobile_device){$('div.tooltip')。trigger('mouseenter'); }其他{...做你的正常桌面任务...};这可以工作,现在将打开工具提示,点击移动设备,并在其他地方正常工作(悬停时打开工具提示)。剩下的最后一件事就是搞清楚如何点击移动设备上的工具提示来打开灯箱.... – Aaron

回答

2

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

+1

你可以做的最好的事情是*不*考虑'悬停'在制作一个触摸屏设备的网站。 –

相关问题