javascript – jQuery mouseleave的触摸屏/平板电脑

我有一个模式盒子,在鼠标器上褪色,并在老鼠眼上淡出.唯一的问题是使用触摸屏设备(如平板电脑)时,一旦显示在页面上,就无法获得模式淡出.有没有办法将此代码修改到任何时候用户在模式框外触摸会淡出的地方？

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