In mobile devices' safari, <a href="#" onclick="return false"> doesn't work, why?

javascript ipad safari onclick preventdefault

19,343

Solution 1

I had the same problem. It turns out that it is a bug in the iOS 5 version of Safari. Doesn't happen in newer or older versions, or any other browser or platform.

I resolved it by adding preventDefault to the onclick event handler, in addition to the existing return false, like so:

<a href="#" onclick="event.preventDefault(); return false;">click me</a>

Not ideal, but it does solve the problem.

Solution 2

I just kinda had the same problem with my links not working right on my friend's iPhone. I deleted the href="#" from mine and the buttons work perfectly fine, except I have my buttons set up a little differently than you with the JavaScript.

The way I have it set up is like this

$(document).ready(function () {
    var buttons=$('#button01,#button02,#button03,#button04,#button05');

buttons.click(function(){
        $(this).removeClass('off-class').addClass('on-class');
        buttons.not(this).removeClass('on-class').addClass('off-class');


})

Then I trigger the frames I want to pop up with

if ($('#button01').hasClass('on-class')){
                $('#frame01').removeClass('hidden');
$('#frame02,#frame03,#frame04,#frame05').addClass('hidden');
                }else{
                    $('#frame01').addClass('hidden');

I don't know how you have yours set up, but removing the href="#" with this set up worked on mine.

Solution 3

I actually tried with

<a href="javascript:void(0)" onclick="return false">click me</a>

and it works well

Solution 4

Seems to be tricky. I tested with this code:

<body>
Hallo
<br>
<div style="height:2000px; width:100px"></div>
<br />    
<a href="#" onclick="alert('click');return false;" 
            onmousedown="alert('down');return false;"
            onmouseup="alert('up');return false;"
            onmouseover="alert('over');return false;"
            onmouseout="alert('out');return false;">

click me</a>
</body>

What happens is, that when I refresh the page on iPhone and tap for the first time I get:

over
down
up
click
scroll up

Every next tap I get:

down
up
click
No scroll up

Funny enough, this works only, when the code contains the alerts. If no alerts inside code, scrolling up happens every time I tap....

For sure there's some magic with hrefs in mobile safari, which you can see, when you hold the link (without lifting the finger): An action sheet appears ("copy", "open", "open in ..." etc.) before one of the events is fired.

View more solutions

19,343

Author by

skyworm

Updated on July 31, 2022

Comments

skyworm over 1 year
In moblie devices' safari, like iphone or ipad, <a href="#" onclick="return false"> doesn't prevent default behaviour, the page was still redirected to '#', why...? Like these html code:
```
<div style="height:1000px; width:100px"></div>
<br />    
<a href="#" onclick="return false">click me</a>
```
When click in moblie devices' safari, it goes back to the top of the page...
skyworm about 12 years

I've edited the question, please ignore the js code before. Just html, but still doesn't work...
Álvaro González about 12 years

The onclick attribute expects JavaScript code rather than a URL. Thus javascript: is just redundant (though at least it won't throw a syntax error since it's valid code).
MoshMage about 10 years

In my case there was no need for the ="..." just the "onclick" served its purpose