用于触摸屏/平板电脑的 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

mouseMouse 事件（mouseover、mouseout、mousedown、mouseup、mousemove 等）特定于鼠标输入设备。键盘有keydown、keypress和keyup。触控有touchstart、touchmove、touchend和touchcancel。 iPhone/iPad/etc 上的 Webkit 具有 Apple 特定的额外手势开始/移动/结束事件。

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

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