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

我有一个模式框，在

mouseenter

上淡入淡出，在

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

}); 

鼠标移动事件（

mouseover

，

mouseout

，

mousedown

，

mouseup

，

mousemove

等）特定于鼠标输入设备。键盘有

keydown

、

keypress

和

keypup

。触摸屏有

touchstart

、

touchsmove

、

touchsend

和

touchscancel

。iPhone/iPad/etc上的Webkit还有其他特定于苹果的手势开始/移动/结束事件

---

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

您可以尝试使用触摸事件（未测试）：

编辑 您可以尝试：

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

---

谢谢，但我试图在用户触摸页面时获取信息，如果模态可见，则将其隐藏。是否关闭任何可以打开的tiptip支架？是的，如果任何tiptop_支架可见，则我希望在触摸身体时将其全部隐藏。我试过了，但它藏了一次之后，我就再也找不到了。非常感谢！body touchstart的问题在于.tiptrigger位于车身内部，因此现在它试图同时打开和关闭。有没有办法代替

$（'body'）。在（'touchstart'）

上基本上说明除了

。tiptrigger

之外是否还触摸了任何东西？应该可以了。我需要你知道它是怎么工作的，是不是在打开一个叠加div？您能提供一个关于JSFIDLE的快速示例吗？

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