Hover and click event on mobile devices

Question

I am creating a responsive website for both desktop and mobile. I have one issue with a hover and click event that I am not sure how to solve for users on mobile devices.

On the site, I have a box (div) that is wrapped in a link. On the desktop, when a user hovers over it, a different colored box with text content slides down over the first box. When a user clicks the box, the link takes them to specified page. I am using jQuery for this.

Right now, on a mobile device, when a user taps the box, second box slides down. But it takes a second tap to actually follow the link. The company that I am creating this for has requested that, on mobile devices, that when the user taps a box, the second box will slide down and after a 2 second delay, it will automatically send them to a specified page. This way, a user is only required to tap once.

I'm not sure how to make this work. I thought about using jQuery mobile, but I can't figure out a way to bypass the first tap (which mobile devices treat like a hover event) and activate the link instead.

Thanks

Wow, that sounds really annoying. Sure, client wants what client wants, but an auto-redirect is (IMHO) a bit of bad design. — DZittersteyn, Aug 29 '12 at 21:41

score 16 · Accepted Answer · edited Feb 23 '16 at 16:41

16

I agree with @DZittersteyn on the fact that this is a bad design. You can better show the content by default in mobile so that the one who clicks knows what he clicked.

if(!!('ontouchstart' in window)){//check for touch device
  $('myElement').unbind('click mouseenter mouseleave'); //use off if you used on, to unbind usual listeners
  $('myElement').on('click',function(){
    //slide down code
    setTimeout(function(){
       window.location.href='asdasd.html';
       },2000);
    });
}

or you can use

if(!!('ontouchstart' in window)){//check for touch device
//behaviour and events for touch device
}
else{
//behaviour and events for pointing device like mouse
}

edited Feb 23 '16 at 16:41

Chris Bier

14,183
17
67
103

answered Aug 29 '12 at 21:58

sabithpocker

15,274
1
42
75

1

What does !! mean? Wouldn't that be equivalent to not not, or the same as nothing at all. – Bryan Jan 08 '14 at 17:47
1

http://stackoverflow.com/questions/4686583/can-someone-explain-this-double-negative-trick – sabithpocker Jan 08 '14 at 18:24
I agree with the significance of `!!` in javascript but doesn't `if()` automatically cast the test to a `boolean` taking care of falsey values? For instance, `let a = {}; if(a['unknownKey']) {console.log(true); \\ won't log} else {console.log(false); // will log} console.log(!!a['unknownKey']);`. Can't think of a case where `if()` is unable to cast correctly to `boolean` but `!!` operator does. – Fr0zenFyr Sep 03 '18 at 07:45

score 2 · Answer 2 · answered Sep 19 '13 at 09:51

if (('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch))) {
    $(".touch")
        .bind("touchstart", function() {
            $(this)
                .addClass("active")
                .bind("touchend", function() {
                    $(this).removeClass("active");
                });
        })
        .bind("touchenter", function() {
            $(this)
                .addClass("hover")
                .bind("touchleave", function() {
                    $(this).removeClass("hover active");
                });
        });
}

score 1 · Answer 3 · edited Feb 23 '16 at 16:41

1

Try using jQuery to listen to the touchstart and touchend events for mobile.

EX:

$('selector').bind('touchstart', function(){
  //some action
});
$('selector').bind('touchend', function(){
  //set timeout and action
});

Hope this helps.

edited Feb 23 '16 at 16:41

Chris Bier

14,183
17
67
103

answered Aug 29 '12 at 21:48

dotfury

312
5
13

first you have to unbind event and bind it – Ayeshmantha Perera May 26 '19 at 20:48

Hover and click event on mobile devices

3 Answers3

Linked