jquery preventdefault on first touch only

Question

I'm hoping to learn a way to code the following for touch only, using jquery?

$(".portfolio a").one("click", false);

This code is for a hover event on a visual menu link. I'd like to prevent the link following through on the first touch, so the hover event happens on the first touch, and a second touch takes you through to the link.

Hover class is tied to href...

Have you looked into this [link](http://stackoverflow.com/questions/9696533/jquery-hover-event-on-a-tag-on-mobile-devices) — Vidhuran, Apr 05 '13 at 13:06
Thanks Vidhuran, I was really interested to see if there was a one-click-false (or preventdefault) equivalent in jquery for touch-only...seems like if there were, it would be the most straightforward solution to the hover issue that abounds... — laura, Apr 05 '13 at 13:39

Urs · Answer 1 · 2013-10-22T17:10:00.980

4

Just test for touch behaviour before unbinding the link once:

if ("ontouchstart" in document.documentElement) {
   $(".portfolio a").one("click", false, function(e){
     e.preventDefault();
   }
}

or vice versa

$(".portfolio a").one("click", false, function(e){
   if ("ontouchstart" in document.documentElement) {
     e.preventDefault();
   }
}

edited Oct 22 '13 at 17:10

answered Oct 21 '13 at 16:07

Urs

4,984
7
54
116

2

Thank you for this. I have been looking since yesterday how to get my dropdown menus working nicely on touch devices and have seen all sorts of complex solutions. And then I found your answer - it is such a simple solution and it works :) – The Baker Apr 11 '14 at 22:39

score 0 · Answer 2 · answered Apr 05 '13 at 13:01

0

It might be more natural to add a .hover class, rather than using a :hover pseudo-selector. That would enable you to do the following:

$(".portfolio a").one("click", function(e) {
    e.preventDefault();
    $(this).addClass('hover');
});

The next click would then behave as usual.

answered Apr 05 '13 at 13:01

jmar777

38,796
11
66
64

Thanks jmar777 - still appears to affect mouse click, though. Looking for solution that will only affect touch device behavior (original css hover is working for mouse). – laura Apr 05 '13 at 13:08
Hmm... I'm not sure you'll be able to differentiate based on the event alone. To the best of my knowledge you'd need to combine some mobile-detection logic to determine which behavior to use. There's a W3C spec for touch events that should help with this kind of problem, but I believe it's still in "last call" status. – jmar777 Apr 05 '13 at 13:12
Ok, thanks so much jmar777, I will look into another approach to resolve! – laura Apr 05 '13 at 13:45
For the record you typed "one" instead of "on". – Reed Martin Jan 28 '16 at 02:55
@JonathanOsborn `.one()` was intentional, actually. It allows you to register an event handler (similar to `.on()`), but the handler will only be invoked the first time the corresponding event is triggered. This was the behavior requested in the original question. – jmar777 Jan 28 '16 at 18:29
1

Right you are. Sorry about that. – Reed Martin Jan 28 '16 at 20:22

score 0 · Answer 3 · answered Apr 05 '13 at 13:01

0

$(".portfolio a").one("click", false, function(event){

event.preventDefault();

};);

Try this

answered Apr 05 '13 at 13:01

underscore

6,495
6
39
78

Why the `false` data parameter? – jmar777 Apr 05 '13 at 13:02
Lol, yes. I don't think it was valid in the original code, though. – jmar777 Apr 05 '13 at 13:05
Thanks Samitha, this seems to have the same effect on the mouse though...I'm hoping to find a solution for touch only... – laura Apr 05 '13 at 13:22

jquery preventdefault on first touch only

3 Answers3

Linked