javascript - 用于触摸屏/平板电脑的 jQuery mouseleave

Question

我有一个模态框，它在 mouseenter 时淡入，在 mouseleave 时淡出。唯一的问题是当使用触摸屏设备(如平板电脑)时，一旦它显示在页面上，我就无法获得 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");

}); 

Answer 1

您可以尝试使用触摸事件(未测试):

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