jquery防止悬停功能触摸

我有一个悬停功能,如果它是触摸设备,我希望悬停事件不会发生.问题是当您点击带有触摸设备的链接时,它会在执行点击事件之前执行悬停事件,因此您必须点击它两次才能使用它.

这是悬停功能：

$("#close").hover( 
    function () { 
        $("#close_2").css({
            display: "none"
        });
        $("#close_1").css({
            display: "block"
        });
    },function () {
        $("#close_1").css({
            display: "none"
        });
        $("#close_2").css({
            display: "block"
        });;
    }
);

然后我将此设置为click功能：

$('#close').click(function() {
    var id = $(this).attr('id');
    $('#full_image').animate({
        height: 0
    },300,function() {
        $('#full_image img').attr('src','#');
    });
    $("#close_1").css({
        display: "none"
    });
    $("#close_2").css({
        display: "none"
    });
    $("#close").css({
        display: "none"
    });
});

解决方法

使.hover()方法更明确,并将其与.on()结合使用：

var $close1 = $('#close_1'),$close2 = $('#close_2');
 
$('#close').on({
    mouseenter: function(){
        $close2.css({display:'none'});
        $close1.css({display:'block'});
    },mouseleave: function(){
        $close1.css({display:'none'});
        $close2.css({display:'block'});
    }
});

然后将其与.off()结合使用.

$('#close').on('touchstart',function(){
    $(this).off('mouseenter,mouseleave');
});

如果您希望在点击触摸设备时触发事件,但悬停在桌面设备上,则将这些功能分别作为您在这些操作中调用的单独功能.

编辑

我做了这个答案已经有一段时间了,这是一个更好的方法：

$(function(){
    var isTouchDevice = ('ontouchstart' in window || 'onmsgesturechange' in window),$close = $('#close'),$close1 = $('#close_1'),$close2 = $('#close_2');
 
    if(!isTouchDevice){
        $close.on({
            mouseenter: function(){
                $close2.hide();
                $close1.show();
            },mouseleave: function(){
                $close1.hide();
                $close2.show();
            }
        });
    }
 
    $close.on('click',function(){
        $('#full_image').animate({height:0},function(){
            $(this).find('img').attr('src','#');
        });
 
        $close.hide();
        $close1.hide();
        $close2.hide();
    });
});

这不需要每次触摸都会触发“悬停预防”事件,基本上设置页面加载功能,同时不影响点击事件.

jquery防止悬停功能触摸

解决方法

猜你在找的jQuery相关文章