本文介绍了jQuery防止触摸时悬停功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我具有悬停功能,如果它是触摸设备,我希望不会发生悬停事件.问题是,当您使用触摸设备点击链接时,它会在执行点击事件之前执行悬停事件,因此您必须点按两次才能使其起作用.
I have a hover function, if it's a touch device I'd like the hover event to NOT happen. The problem is when you tap the link with a touch device it does the hover event before doing the click event, so you have to tap it twice for it to work.
这是悬停功能:
$("#close").hover(
function () {
$("#close_2").css({
display: "none"
});
$("#close_1").css({
display: "block"
});
},
function () {
$("#close_1").css({
display: "none"
});
$("#close_2").css({
display: "block"
});;
}
);
然后将其设置为点击功能:
and then I have this set up as the click function:
$('#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"
});
});
推荐答案
最终使用触摸检测:
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"
});
});
}
这篇关于jQuery防止触摸时悬停功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!