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

 山间农夫的家 发布于 2023-02-07 09:10

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

}); 

Irvin Domini.. 17

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

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


Milind Anant.. 8

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

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

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

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

    2023-02-07 09:12 回答
  • 您可以尝试使用触摸事件(未测试):

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

    2023-02-07 09:13 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有