触摸屏/平板电脑的jQuery mouseleave [英] jQuery mouseleave for touch screen / tablets

问题描述

我有一个模态框，它在mouseenter上淡入，在mouseleave上淡出.唯一的问题是，当使用触摸屏设备(例如平板电脑)时，fadeout的模态在页面上显示后就无法使用.是否有任何方法可以将代码修改为用户在模态框外触摸的任何地方fadeout?

I have a modal box which fades in on mouseenter and fades out on mouseleave. The only problem is when using a touch screen device such as a tablet, I can't get the modal to fadeout once it's showing on the page. Is there any way of modifying this code to where anytime the user touches outside the modal box it will 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");

}); 

推荐答案

您可以尝试使用触摸事件(未经测试):

You can try using touch events (not tested):

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

编辑

您可以尝试:

EDIT

You can try:

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

这篇关于触摸屏/平板电脑的jQuery mouseleave的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！