jQuery悬停、点击和触摸组合

Question

我想使用悬停、点击和触摸事件来显示和隐藏一个元素。这背后的想法是，您将能够将相同的元素用于触摸设备、使用鼠标的设备和组合设备，例如具有触摸功能的笔记本电脑。所以我需要结合鼠标和触摸输入。 问题是事件相互影响，当我使用触摸时会触发多个事件，导致元素一次又一次地显示和隐藏。

我怎样才能得到我想要的行为；

• 点击和触摸切换
• 在 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/

Answer 1

您想要实现的主要目标是禁用默认行为。

您可以为各种事件添加侦听器，并在事件侦听器的开头阻止其他事件。例如：

$(document).on('touchstart click', '#thingToTrigger', function (event) {
    event.preventDefault();
    //Do Touch specific stuff, e.g. toggle()
});

$(document).on('mouseenter', '#thingToTrigger', function (event) {
    event.preventDefault();
    //Do Mouseenter specific stuff, e.g. show()
});

$(document).on('mouseout', '#thingToTrigger', function (event) {
    event.preventDefault();
    //Do Mouseout specific stuff, e.g. hide()
});

Answer 2

您可以在单击该元素时添加类。

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();
});

希望对您有所帮助。