2012-04-14 69 views
4

私は自分のページにこのコードを持っている:<a href onClick="return false;"> Safari/iOSで作業していませんか?

<a href onClick="return false;">Press me!</a> 

リンクは便利なonClickイベントでスパンの内側に配置されます。

今、ChromeとFirefoxではこれが完全に機能します。リンクがクリックされ、有用なイベントが実行され、誰もが幸せです。デフォルトのSafariブラウザを使用しているiOS(iPhoneとiPad)では、リンクがクリックされた後にページ全体が再読み込みされ、有用なイベントが実行されることはありません。

また、私はこれを行うための間違った方法であると理解

<a href="#" onClick="return false;">Press me!</a> 

を試してみました。 ChromeとFirefoxではうまく動作しますが、iOSのSafariではページの先頭にジャンプしました(ただし、便利なイベントを実行していましたので、意味が分かりました)。

私には何が欠けていますか?

答えて

3

説明からわかるように、iOSブラウザのJS実装のバグのようです(デモンストレーションするための最小限のコードを作成するのがよいでしょうか?)。

簡単な回避策は、<a href...><span style="cursor:pointer;">に置き換えることです。

+0

これは私が望んでいた解決策ではありませんが、確かにiOSのバグと思われ、回避策が働いていました。 –

1

純粋にjavascriptから要素をバインドしようとしましたか?

<a href="#" id="nogo">Foo</a> 

document.getElementById('nogo').onclick = function(ev) { 
ev.preventDefault(); 
}; 
+0

これは多くのそのようなリンクがあり、大きなシステム(phpbb、リンクはスポイラーテキストを表示するためのもの)によって動的に作成されるため、問題の解決策です。 –

+0

ああ、十分に公正で、指定されていないので推測できませんでした。 jqueryをまったく使用できますか?新しく作成されたコマンドでも1つのコマンドでそれらをすべてバインドすることができます。 – GillesC

+0

私はいくつかのハッキングを行うことができますが、私はルール内に滞在することを望んでいます。つまり、viewtopic.phpで遊ぶことなく、メッセージのスポイラータグを置き換えるhtmlコードを提供します。文脈を指定しなかったのは、これはリンクの仕組みに関する基本的なことを理解していないという私の問題だと思われたからです。 –

7

href="#"を設定することができます。ページ上部に同じジャンプが表示されます。 #はインページアンカーです。これはページの上部を意味します。私はその定義された振る舞いについて明確ではない。しかし、うーん、あなたはそれをキャンセルしたい。

iPhone 5.0.1シミュレータでは、両方のキャンセル方法を組み合わせると機能し、上にスクロールしません。これは私の完全なtest.htmlファイルです。これはシミュレータ、Chrome、OS X Safariで動作します。

<div style="height: 1000px; background-color: blue;"></div> 
<a href="#" onClick="event.preventDefault(); return false;">Poke it!</a> 
<div style="height: 1000px; background-color: red;"></div> 

記録のために、event.preventDefault();を削除すると、バグが複製されます。

+0

ありがとうございます、私はpreventDefaultの使用については考えていませんでした。 –

関連する問題