javascript 在移动设备的 safari 中，<a href="#" onclick="return false"> 不起作用，为什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10223809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In mobile devices' safari, <a href="#" onclick="return false"> doesn't work, why?
提问by skyworm
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:
在移动设备的 safari 中，如 iphone 或 ipad，<a href="#" onclick="return false">不会阻止默认行为，页面仍被重定向到“#”，为什么...？像这些 html 代码：
<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...
当单击移动设备的 safari 时，它会返回到页面顶部...
回答by SDC
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.
我有同样的问题。事实证明，这是iOS 5 版本的Safari 中的一个错误。在较新或较旧版本或任何其他浏览器或平台中不会发生。
I resolved it by adding preventDefaultto the onclick event handler, in addition to the existing return false, like so:
preventDefault除了现有的之外，我还通过添加到 onclick 事件处理程序来解决它return false，如下所示：
<a href="#" onclick="event.preventDefault(); return false;">click me</a>
Not ideal, but it does solve the problem.
不理想，但确实解决了问题。
回答by Optiq
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.
我只是遇到了同样的问题，我的链接在我朋友的 iPhone 上无法正常工作。我删除了 href="#"我的按钮，按钮工作得很好，只是我的按钮设置与 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.
我不知道你是如何设置你的，但是删除href="#"这个设置对我有用。
回答by Kai Huppmann
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:
发生的情况是，当我在 iPhone 上刷新页面并第一次点击时，我得到：
- over
- down
- up
- click
- scroll up
- 超过
- 向下
- 向上
- 点击
- 向上滑动
Every next tap I get:
每次点击我都会得到：
- down
- up
- click
- Noscroll 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.) beforeone of the events is fired.
可以肯定的是，移动 Safari 中的 hrefs 有一些神奇之处，当您按住链接（不抬起手指）时，您可以看到：操作表出现（“复制”、“打开”、“打开方式……”等。 )在其中一个事件被触发之前。
回答by kschaeffler
I actually tried with
我实际上尝试过
<a href="javascript:void(0)" onclick="return false">click me</a>
and it works well
它运作良好
回答by Yauhen Vasileusky
Firstly, try this:
首先，试试这个：
<a href="#" id='test'>click me</a>
in js:
在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:
在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
第一个变体要好得多，因为您没有混合使用 html 和 javascript
回答by Tobi
Why not? I think, you must call a function and not only return false...
为什么不？我认为，您必须调用一个函数，而不仅仅是返回 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;
}
回答by rfornal
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.
基本上，我采用了类似的解决方案，但通过一些条件检查进行了更多备份……这是基于 jQuery 的，用于在 Sitefinity 中登录。
if ($.browser.safari) {
$('.sfSubmitBtn').attr('onclick', 'event.preventDefault(); return false;');
}
I did find that using the event.preventDefault() causeda similar issues to begin occurring in some versions of IE.
我确实发现使用 event.preventDefault()导致在某些版本的 IE 中开始发生类似的问题。
