jQuery и mouseleave для сенсорного экрана / планшета

у меня есть модальная коробка, которая исчезает вmouseenter и заканчивается на mouseleave. Единственная проблема заключается в том, что при использовании устройства с сенсорным экраном, такого как планшет, я не могу получить модальный fadeout как только он отображается на странице. Есть ли способ изменить этот код, где в любое время пользователь касается вне модального окна, он будет 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");

});
10
css html javascript jquery

2 ответов

Вы можете попробовать использовать сенсорные события (не проверял):

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

редактировать

можно попробовать:

$('.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");        
});
15

события mouseMouse (mouseover, mouseout, mousedown, mouseup, mousemove и т. д.) относятся к устройству ввода мыши. Клавиатура keydown, keypress и keyup. Касание touchstart, touchmove, touchend и touchcancel. Webkit на iPhone / iPad / etc имеет дополнительные события start/move/end, специфичные для Apple.

таким образом, вы должны проверять устройство, на котором вы запускаете приложение, а затем обрабатывать код соответственно.

6