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"
        });;
    }
); 

然后我将此设置为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"
    });
});

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();
    });
});

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

Answer 2

我认为一个明确的方法是:

1. 检测浏览器是否支持触摸事件
2. 相应地添加悬停事件处理程序

如果你已经使用了像Modernizr这样的东西:

if(!Modernizr.touch){
    // only if the browser doesn't support touch events,
    // add the hover handler here.
}
//add the click handler here, as you want it bound no matter what

请参阅使用JavaScript检测"触摸屏"设备的最佳方法是什么？和什么是检测使用JavaScript一个"触摸屏"装置的最佳方式？用于检测触摸功能的其他选项.

Answer 3

最终使用触摸检测：

var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);

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