Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent jQuery from running mouseenter on touch devices

Tags:

jquery

touch

I have written some fancy hover scrolling effects in jQuery. They work great on a desktop computer. My problem is that on a mobile device, because the user taps on the screen, my code still believes the user is hovering on my .scrollright div and keeps scrolling.

How can I disable this, or otherwise just prevent this problem, on mobile/tablet devices?

$('.thumbnails .scrollright').on('mouseenter', function() {
    this.iid = setInterval(function() {
        var CurrentScrollLeft = $( ".thumbnails .thumbnailphotos" ).scrollLeft();
        $( ".thumbnails .thumbnailphotos" ).scrollLeft( CurrentScrollLeft+10 );         
    }, 50);
    }).on('mouseleave', function(){
        this.iid && clearInterval(this.iid);
    });
like image 792
Chris DeMarco Avatar asked Apr 13 '14 23:04

Chris DeMarco


1 Answers

A quick check for touch maybe?

var tap = ("ontouchstart" in document.documentElement);

Then wrap your code in the condition:

if(!tap){
    $('.thumbnails .scrollright').on('mouseenter', function() {
        this.iid = setInterval(function() {
            var CurrentScrollLeft = $( ".thumbnails .thumbnailphotos" ).scrollLeft();
            $( ".thumbnails .thumbnailphotos" ).scrollLeft( CurrentScrollLeft+10 );         
        }, 50);
    }).on('mouseleave', function(){
        this.iid && clearInterval(this.iid);
    });
}

Something like that anyways.

like image 127
chrismauck Avatar answered Sep 23 '22 02:09

chrismauck