Question

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

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

点击并触摸时切换
在mouseenter上显示
隐藏在mouseout上

我尝试了多种实现，如下所示，似乎都没有稳定。

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

希望得到这个帮助。

JQuery悬停，单击和触摸组合

2 个答案: