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...
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...
Share Improve this question edited Apr 19, 2012 at 8:37 skyworm asked Apr 19, 2012 at 7:52 skywormskyworm 811 gold badge1 silver badge3 bronze badges 7- onclick="javascript:return false;" ? – adali Commented Apr 19, 2012 at 7: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 Commented Apr 19, 2012 at 8:05
- Instead of "onclick" you can give a try to "onkeyup", "onmouseup" or "onkeypress" – Tobi Commented Apr 19, 2012 at 8:10
- 2 @adali — Why would adding a label help? There is no loop to break or continue from. – Quentin Commented Apr 19, 2012 at 8:38
- @Tobi, keyup, mouseup would be weird... – skyworm Commented Apr 19, 2012 at 8:41
7 Answers
Reset to default 6I 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.
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.
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.
I actually tried with
<a href="javascript:void(0)" onclick="return false">click me</a>
and it works well
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;
}
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
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.