jQuery mouseleave for touch screen / tablets

Question

I have a modal box which fades in on mouseenter and fades out on mouseleave. The only problem is when using a touch screen device such as a tablet, I can't get the modal to fadeout once it's showing on the page. Is there any way of modifying this code to where anytime the user touches outside the modal box it will fadeout?

$(".tiptrigger").mouseenter(function() { 

    var s_id = $(this).attr('id'); // There may be more than one per page
    $("#tiptip_holder-"+s_id).fadeIn("fast");   

}); 

$(".tiptrigger").mouseleave(function() { 

    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("slow");

});

Irvin Dominin · Accepted Answer · 2014-01-02T12:38:27.617

19

You can try using touch events (not tested):

$('.tiptrigger').on('mouseenter touchstart', function(){ 
    var s_id = $(this).attr('id'); // There may be more than one per page
    $("#tiptip_holder-"+s_id).fadeIn("fast"); 
});

$('.tiptrigger').on('mouseleave touchend', function(){
    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("slow");
});

EDIT

You can try:

$('.tiptrigger').on('mouseenter touchstart', function(e){ 
    var s_id = $(this).attr('id'); // There may be more than one per page
    $("#tiptip_holder-"+s_id).fadeIn("fast"); 
    e.stopPropagation()
});

$('.tiptrigger').on('mouseleave', function(e){
    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("slow");
});

$('body').on('touchstart', function(e){ 
    $("div[id^='tiptip_holder']").fadeOut("slow");        
});

edited Jan 02 '14 at 12:38

answered Jan 02 '14 at 12:13

Irvin Dominin

30,819
9
77
111

Thanks, but Im trying to get anytime the user touches the page, if the modal is visible then hide it. – MultiDev Jan 02 '14 at 12:29
You want to close any tiptip holder that can be opened? – Irvin Dominin Jan 02 '14 at 12:31
Yes, if any tiptop_holder is visible, I want to hide all of them when the body is touched. Ive been trying with it, but after it hides once, I can't get it to reappear. – MultiDev Jan 02 '14 at 12:32
Thanks a ton! The problem with body touchstart is that the .tiptrigger is located within the body, so now it's trying to open and close at the same time. Is there a way, instead of `$('body').on('touchstart')` to basically state if anything is touched besides `.tiptrigger`? That should do it. – MultiDev Jan 02 '14 at 12:45
I need yo know how it works, is it opening an overlay div? Can you provide a quick sample on jsfiddle? – Irvin Dominin Jan 02 '14 at 12:46
All of the divs are on the page, but hidden. – MultiDev Jan 02 '14 at 12:49

score 10 · Answer 2 · edited Mar 24 '16 at 05:23

mouseMouse events (mouseover, mouseout, mousedown, mouseup, mousemove, etc) are specific to the mouse input device. The keyboard has keydown, keypress and keyup. Touch has touchstart, touchmove, touchend and touchcancel. Webkit on the iPhone/iPad/etc has additional gesture start/move/end events that are Apple-specific.

Thus you should be checking for the device on which you are running the app and then handle the code accordingly.

jQuery mouseleave for touch screen / tablets

2 Answers2

EDIT

Linked