jquery 防止触摸时悬停功能

Question

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

这是悬停功能:

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

然后我将其设置为点击功能:

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

Answer 1

使 .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},300,function(){
            $(this).find('img').attr('src','#');
        });

        $close.hide();
        $close1.hide();
        $close2.hide();
    });
});

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