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悬停，点击和触摸组合

回答

相关问题