JQuery 悬停、点击和触摸组合

Question

I would like to show and hide an element using events. The idea behind this is that you will be able to use the same element for touch devices, devices that use a mouse and combination devices, like laptops that have touch. So I would need to . The problem is that the events influence eachother and multiple events are fired when I use touch causing the element to be shown and hidden over and over again.

How can I get the behaviour I want;

• toggle on click and touch
• show on mouseenter
• hide on mouseout

I have tried multiple implementations such as the following and none seem to be stable.

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

Here is the

Answer 1

The main thing you want to achieve is to disable default behaviour.

You can add listeners for the various events, and prevent the others at the beginning of the event listeners. eg:

$(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

You can add class on click of that element.

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

Hope this help.