jquery preventing hover function on touch
I think a clear approach would be to:
- Detect if the browser supports touch events
- Add the hover event handler accordingly
If you're using something like Modernizr already:
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
See What's the best way to detect a 'touch screen' device using JavaScript? and What's the best way to detect a 'touch screen' device using JavaScript? for other options to detect touch capabilities.
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.