javascript - CSS3スポットライト効果をタッチイベントで機能させようとしています

Question

この効果をiPadのタッチイベントで機能させようとしています。これは、jsfiddlehttp://jsfiddle.net/FwsV4/1/のマウスイベントでどのように表示されるかを示しています。

これは私がhttp://jsfiddle.net/FwsV4/3/を試したものですが、うまくいきません。

正直なところ、タッチイベントと、マウスのクリック/移動をそれらに変換する方法に少し迷っています。この効果を最大限に活用する方法は実際にはわかりませんが、タッチ開始/終了イベントを使用して、下にある要素をインタラクティブに保ちたいと思います。

誰かが私を正しい方向に向けることができますか？

score 1 · Accepted Answer

最初の問題は、ページがスクロールしないようにtouchstartにバインドする必要があることです。あなたはただすることができます：

$('myElement').htmlElement.bind("touchstart", function(event) {
    event.preventDefault();
  }
);

ただし、これからも調整を取得する方がおそらく良いでしょう。

タッチイベントに関する優れたチュートリアルは次のとおりです。http ：//www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

2番目の問題は、要素を5000pxの高さと幅に設定することです。デフォルトでは、iOSはページ全体を含むようにズームします。これを調整するか、ビューポートタグを使用してズーム動作を変更する必要があります（ビューポートアップルのドキュメントを参照）。

次のコードも正しくなく、オブジェクトの1つではなくブール値を返します。

  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

これは次のようになります。

 var touch = e.originalEvent.touches[0] ? e.originalEvent.touches[0] : e.originalEvent.changedTouches[0];

ただし、touchmoveを使用すると、 e.originalEvent.touches [0]に関心があります（1本の指のタッチイベントのみが対象であると想定しています）。

また、この方法でインラインjsと個別のファイルjsを使用することは避けてください（状況によってはそうする理由があります）。追跡が難しくなります。

jfiddleでタッチイベントを使用することも素晴らしい計画かどうかはわかりません（私は間違っているかもしれません）。通常のWebサーバー/ローカルファイルを使用して開発します。

1 に答える 1