2012-02-21 1 views
3

にスクロールした後、クリック能力を失う:アンカークリックを拾うために、これを使用してのiOSのSafari

$("nav li a").click(function(event) { 
    event.preventDefault(); 
    target = $(this).attr("href").replace('#', ''); 
    goToByScroll(target); 
}); 

そして、これはスクロール機能である:

function goToByScroll(id) { 
    $('html, body').animate({ 
     scrollTop: $("#"+id).offset().top - totalHeight 
    }, 'slow'); 
} 

最初のクリックの作品が、その後のリンクが上がりませんページが手動でスクロールされない限り、クリック可能/アクティブです。何か案は?

答えて

0

ここには、あなたがリンクしているコードに関係しない多くの要素があります。クリックが動作しない場合:

  1. クリックイベントが
  2. あなたがクリックしようとしている要素は、あなたの要素のクリック可能な領域がずれたりれる
  3. 別の(おそらく透明)の要素で覆われているがクリアされています不正な形式の

最初に問題が発生する可能性がある場合は、リフレッシュするまで、またはクリックハンドラを再作成するまで要素をクリック解除したままにしておく必要があります。クリックハンドラが複数回構築されていないことを確認してください。 $(element).click(function() { ... })への呼び出しの時点で、ブレークポイントまたは警告/コンソールステートメントを設定することで、これを行うことができます。

第2の可能性として、クリック可能な要素の上に別の要素が存在する必要があります。これは、要素を右クリックして検査することができるブラウザまたはブラウザ拡張を使用して確認できます。検査された要素がクリック可能な要素でない場合、これはおそらく問題です。

3番目の可能性として、クリック可能な要素の位置、サイズ、および形状が解除不可能であることを確認する必要があります。ブラウザまたはブラウザ拡張を使用して、ページ上の要素を選択してハイライトします。表示されている場所、表示されているサイズ、表示されている表示プロパティ(display: inline)はz-indexです(現在のビューポートでも実際には「display: inline」と表示されています)。

要するに、あなたが投稿したコードは何が起こっているのかについて何も言わないので、より多くのデバッグやコードの提供が必要です。

+0

私はheaderタグとnavタグで固定位置を使用しています。 navタグにはli要素がすべて表示され、左側に浮動表示されます。ヘッダータグとナビタグにはz-index:1があり、ドキュメントをスクロールするときにコンテンツの上部にとどまるようにします。問題は、最初に$( "nav li a")の上でクリックイベントを取得した後、クリックの能力を失うことです。しかし、ページを1ピクセルだけスクロールすると、クリック可能になります。私は問題が固定位置divを持つiOSのバグだと示唆する同様の投稿を見たことがあります。それがここの場合と同じであるかと思います。 – user1223466

+0

私はjsfiddleでこれのベアボーンバージョンを構築し、同じバギーの結果を生成できるかどうかを確認することをお勧めします。そうでない場合、エラーは他の場所にあります。 – Koviko

+0

私はまったく同じ問題を抱えています...私のヘッダーは修正されました。ニュースアイテムのリストを下にスクロールすると、ヘッダーの裏がクリックされません。しかし、指でスクロールしてすぐにクリック可能です。 iOSのみの場合、これをどのようにデバッグしますか?私は実験中です! しかし、ヘッダーの下にリンクがスクロールされている場合は、そのリンクがクリックされずにクリックされます。 –

1

iOSの男とのさらなる調査の結果、iOS5のSafariのバグであることが判明しました。

私はこれを試しました。

// $('html,body').animate({ scrollTop: scrollto + 'px' }, 'slow') 
window.scroll(0,0); 

そして、固定ヘッダーを実際に画面の下に描きました。クリックして作業。

コードを元に戻しましたが、ヘッダーが正しく上に表示されていましたが、アクティブなクリック領域はまだ表示されませんでした。

iOS6でのテストが完了したようです。

すべての種類のCSSとDOM操作を使い果たし、新しいヘッダー領域を削除して再挿入しました...何も機能しません。

私はこの回答を99%確実に投稿しています。笑。私はそれがあなたを助けないことを認識しますが。

関連する問題