When touching html button on iPhone, the href occasionally adds # to the URL: Why?

Question

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".

Answer 1

You need to handle and cancel the click event too.

Answer 2

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.