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.
this is the hover function:
$("#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"
});
});
Make the .hover() method more explicit and combine it with .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'});
}
});
Then combine that with .off().
$('#close').on('touchstart',function(){
$(this).off('mouseenter,mouseleave');
});
If you want the event to fire on click with touch devices, but on hover on desktop devices, then put the functions as a separate function you call within those actions respectively.
EDIT
Been a while since I did this answer, here is a better way:
$(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();
});
});
This doesn't require a "hover prevention" event to fire with each touch, basically sets capabilities on page load while not affecting the click event.