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特定的附加手势开始/移动/结束事件。

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

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

2 个答案:

修改