我有一个悬停功能,如果它是触摸设备,我希望悬停事件不会发生.问题是当您点击带有触摸设备的链接时,它会在执行点击事件之前执行悬停事件,因此您必须点击它两次才能使用它.
这是悬停功能：
$("#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();
});
});
