0

Here's a live demo page

... and the relevant code:

$('#button').on('touchstart', 'a', function(e) {
    
    e.preventDefault();
    
});

When using my iPhone4 and Safari 5.1.1, sometimes when touching the black button (on my demo page), I'll get a hash tag in the URL (i.e. http://foo.com/#). It does not happen all the time, only occasionally... It appears to happen when touching slower on the outside edge of the button.

I'm stumped!

Any idea what's going on here? Tips on how to make sure the link never fires?

EDIT #1:

I don't want the hash tag to ever appear in the URL. (sorry if this was not clear).*

EDIT #2:

For future readers: After asking my question, I found this question... It's related to my issue and there's a ton of useful suggestions.

Thanks to everyone who replied here... If it was not for you, I probably would not have discovered the above thread.

Also, here's my latest demo page just in case anyone want's to see the solution I chose for handling "ghost clicks".

Community
  • 1
  • 1
mhulse
  • 4,062
  • 6
  • 28
  • 35
  • The `href="#"` set on the anchor tag is likely the problem. – Jared Jul 18 '12 at 19:30
  • I assumed the e.preventDefault() would handle that. Based on what Slaks says, I might need to put that in a click event also... Testing now. – mhulse Jul 18 '12 at 19:48

2 Answers2

1

You need to handle and cancel the click event too.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • Ah, I was wondering about that! So, I should do something like: `on('touchstart click', 'a', function() { if (e.type === 'touchstart') { ...do stuff here... } e.preventDefault(); });`? Won't the click fire before the touchstart? Will the two conflict? Testing now and I'll be back with my findings. Thanks! – mhulse Jul 18 '12 at 19:53
  • Here's a [new test page](http://jsbin.com/inajiq). That appears to help! **One of my concerns is that click and touchstart will both fire thus causing my code to execute twice.** But, on the iPhone, it appears as though it's one or the other, but not both. Interesting... – mhulse Jul 18 '12 at 20:16
  • There's some [interesting comments over here](http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both)... Looks like I need to do some research on "Ghost Clicks". – mhulse Jul 18 '12 at 20:31
  • I kinda like [this solution to handle "ghost clicks"](http://stackoverflow.com/a/11507558/922323). I've [updated my demo page](http://jsbin.com/inajiq/2) to include that code. – mhulse Jul 18 '12 at 20:44
0

in order to add the href attribute to link elements but not have them go anywhere you can add "#" to the href. : href="#" . without it, the link loses the pointer cursor.

ChrisThompson
  • 1,998
  • 12
  • 17
  • In this case, I don't want the href to go anywhere... I'm just curious as to why the e.preventDefault() is, from what I can tell, only partially working on Mobile Safari. Sorry if my original question was not clear. :( – mhulse Jul 18 '12 at 19:50