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

Question

我有一个模态框,淡入淡出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");

}); 

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

Answer 2

mouseMouse事件(mouseover,mouseout,mousedown,mouseup,mousemove,等等)是特定于鼠标输入设备.键盘有keydown,keypress和keyup.触摸有touchstart,touchmove,touchend和touchcancel.iPhone/iPad /等上的Webkit具有Apple特有的附加手势开始/移动/结束事件.

因此,您应该检查运行该应用程序的设备,然后相应地处理代码.