JQuery懸停，點擊和觸摸組合

我想顯示和隱藏使用懸停的元素，單擊並觸摸事件。這背後的想法是，你將能夠使用相同的元素用於觸摸設備，使用鼠標和組合設備的設備，如具有觸摸功能的筆記本電腦。所以我需要組合鼠標和觸摸輸入。問題是這些事件會影響彼此，當我使用觸摸導致元素一遍又一遍地顯示和隱藏時會觸發多個事件。JQuery懸停，點擊和觸摸組合

如何獲得我想要的行爲;

上點擊觸摸
顯示切換上的mouseenter
隱藏鼠標移開時

我曾嘗試多種實現，如以下和沒有似乎是穩定的。

$("#showMe").hide(); 
$(document).on('touchstart click mouseenter mouseout', '#thingToTrigger', function (event) { 
    event.stopPropagation(); 
    if (event.handled !== true) { 
     $("#showMe").toggle(1000); 
     event.handled = true; 
    } else { 
     return false; 
    } 
});

這裏是的jsfiddle http://jsfiddle.net/9305f9d7/

來源

2014-09-26 Danielle

-1

您可以在該元素的單擊添加類。

e.g. #div1 and #div2 

$("#div1").click(function(){ 
    $(this).toggleClass("clicked"); 
    $("#div2").show(); 
}); 

$("#div1").on("mouseenter",function(){ 
    $("#div2").show(); 
}); 

$("#div1").on("mouseout",function(){ 
    if($(this).hasClass("clicked")==false) $("#div2").hide(); 
});

希望得到這個幫助。

來源

2014-09-26 11:11:07

如果我不想包含觸摸，這可以在有或沒有切換類的情況下使用。問題不在於懸停事件觸發了一個點擊事件，而是觸摸事件觸發了一個mouseenter事件，隨後是一個mouseout事件。添加一個類來解決這個問題將與添加一個變量來跟蹤顯示和隱藏相同。這對我來說似乎不是一個非常優雅的解決方案。 – Danielle 2014-09-29 09:32:01

JQuery懸停，點擊和觸摸組合

回答

相關問題