javascript - 触摸屏/平板电脑的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");

});

最佳答案

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

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