2012-06-27 72 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

你可以做的最好的事情是*不*考慮'懸停'在製作一個觸摸屏設備的網站。 –

相關問題