8

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
  • 81
  • 1
  • 1
  • 3
  • onclick="javascript:return false;" ? – adali Apr 19 '12 at 07:54
  • did you check how things work on a desktop browser? I assume it has something to do with touch vs. mouse events. – Kai Huppmann Apr 19 '12 at 08:05
  • Instead of "onclick" you can give a try to "onkeyup", "onmouseup" or "onkeypress" – Tobi Apr 19 '12 at 08:10
  • 2
    @adali — Why would adding a [label](https://developer.mozilla.org/en/JavaScript/Reference/Statements/label) help? There is no loop to break or continue from. – Quentin Apr 19 '12 at 08:38
  • @Tobi, keyup, mouseup would be weird... – skyworm Apr 19 '12 at 08:41
  • @Kai, it works well on desktop browser. touch or mouse events would trigger a link redirection? I don't understand... – skyworm Apr 19 '12 at 08:44
  • I'm not sure about that, but I think mobile safari fires more than onClick on a tap. So if the href reacts on one of these and they're fired before onClick or if onClick isn't fired at all on a single tap, the redirect will still be executed. Maybe you should test with onMouseover, onMouseout etc. – Kai Huppmann Apr 19 '12 at 09:02

7 Answers7

6

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.

SDC
  • 14,192
  • 2
  • 35
  • 48
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.

SchmitzIT
  • 9,227
  • 9
  • 65
  • 92
Optiq
  • 2,835
  • 4
  • 33
  • 68
1

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:

  1. over
  2. down
  3. up
  4. click
  5. scroll up

Every next tap I get:

  1. down
  2. up
  3. click
  4. 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.

Kai Huppmann
  • 10,705
  • 6
  • 47
  • 78
1

I actually tried with

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

and it works well

kschaeffler
  • 4,083
  • 7
  • 33
  • 41
0

Why not? I think, you must call a function and not only return false...

<a href="#" onclick="javascript:myFunction()" id="test_a">click me</a>

function myFunction() {
  var elem = document.getElementById('test_a');
  if (elem.addEventListener) {
      elem.addEventListener('click', function() {
          alert('clicked');
      }, false);
  } else {
      elem.attachEvent('onclick', function() {
          alert('clicked');
      });
  }

  return false;
}
Tobi
  • 1,440
  • 1
  • 13
  • 26
  • I've edited the question, please ignore the js code before. Just html, but still doesn't work... – skyworm Apr 19 '12 at 08:03
  • 1
    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). – Álvaro González Apr 19 '12 at 08:46
0

Firstly, try this:

<a href="#" id='test'>click me</a>

in js:

$('a#test').click(function(event){
    event.preventDefault();
});

Secondly(if the first variant will not work):

<a href="#" id='test' onclick='return DummyFunction();'>click me</a>

in js:

function DummyFunction(){
    return false;
}

As far as i remember, one of these variant solved the same problem, when i had it.

The first variant is much better, becouse you don't mix html and javascript

Yauhen Vasileusky
  • 655
  • 5
  • 11
0

Basically, I went with a similar solution, but backed up a bit more with some conditional checking ... this is jQuery based and used for login in Sitefinity.

  if ($.browser.safari) {
    $('.sfSubmitBtn').attr('onclick', 'event.preventDefault(); return false;');
  }

I did find that using the event.preventDefault() caused a similar issues to begin occurring in some versions of IE.

rfornal
  • 5,072
  • 5
  • 30
  • 42