CODEWITHSUNDEEP
jquerytouch
Chris DeMarco
Chris DeMarco

Reputation: 173

Prevent jQuery from running mouseenter on touch devices

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);
    });

Upvotes: 8

Views: 7247

Answers (1)

chrismauck
chrismauck

Reputation: 576

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.

Upvotes: 15

Related Questions