3

次のJavascriptを使用して、iOSWebアプリのdiv要素にontouchstart/ move/endコールバックを作成しています。現時点での唯一の問題は、ページを上下にスクロールしようとすると、ontouchstart要素がトリガーされ、divのCSSが変更されることです。ユーザーがアイテムを選択したときにのみ、divのCSSを変更したい。私はJavascriptについてはかなり基本的ですが、ユーザーがアイテムを選択しているときにのみJavascriptをトリガーする方法を誰かが知っているなら、それは大いにありがたいです！

ありがとう！

TC

Javascript： 

function onclickCallback( event ) {

}

function ontouchstartCallback( event ) {

event.target.className = 'choice_link_selected';
}

function ontouchmoveCallback( event ) {

event.target.className = 'choice_link_selected';
}

function ontouchendCallback( event ) {

event.target.className = 'choice_link';

}

HTML：

<div class="choice_link" onclick="onclickCallback(event);" ontouchstart="ontouchstartCallback(event);" ontouchend="ontouchendCallback(event);" ontouchmove="ontouchmoveCallback(event);">
            <a href="javascript:location.href='test.php'">Test</a>
         </div>
4

3 に答える 3

1

event.stopPropagation()イベントのバブリングを停止するために使用しevent.preventDefault()、デフォルト ハンドラーを回避するために使用します。

<div id="ctr" class="choice_link">
     <a href="javascript:location.href='test.php'">Test</a>
</div>
<script>
function onTouchStart(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = 'selected';
}

function onTouchEnd(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = '';
}

var ctr = document.getElementById('ctr');
ctr.addEventListener('touchstart', onTouchStart, false);
ctr.addEventListener('touchend', onTouchEnd, false);
</script>
于 2011-02-01T05:21:45.080 に答える
0

私の知る限り、ハンドラーだけを使用してデフォルトの状態onmousemoveにスワップするのは正しいことです。iPhoneのスクロール中にボタンの状態がフリーズclassNameする問題は、別の問題に関連しています。ビューをスクロールしようとすると、ページレンダリングとの相互作用がロックされ、良好なパフォーマンスでスクロールを実行し、競合を回避します。次に、ページのコンテンツがフリーズしたように見えます。そのため、スクロールする前にボタンをデフォルトの状態に戻すことはできません。

悲しいことに、この動作はスクロールの開始方法によって異なります。div領域をスクロールし、ボタンdivがtouchmoveスクロールプロセスの前にイベントをディスパッチできる場合、それは機能します。そうでない場合、スクロールが完了するとcssクラスが復元されます。

一部のJavaScriptタッチフレームワークは、タッチイベントをキャッチしてこれを解決し、デフォルトのブラウザー動作（スクロールなど）を防ぎ、独自のスクロールシステムを実装します。

私は知っています、それは解決策ではありませんが、説明になるかもしれません。

それが役に立てば幸い。チャオ。

于 2011-02-01T07:52:17.250 に答える
0

あなたが求めていることを私が理解していると仮定すると：

ontouchstartCallbackに追加します。

if(event.touches.length < 1) return;
event.target.touchdata = [event.touches[0].clientX, event.touches[0].clientY];

ontouchmoveCallbackの内容を次のように置き換えます。

if(event.touches.length < 1) return;
var threshold = 5;
if(event.target.touchdata)
{
    if(Math.abs(event.touches[0].clientX - event.target.touchdata[0]) > threshold
    || Math.abs(event.touches[0].clientY - event.target.touchdata[1]) > threshold)
    {
        event.target.className = 'choice_link';
        event.target.touchdata = false;
    }
}

これが何をしているのか：

タッチ イベントが開始されると、タッチされた DOM 要素に X/Y 座標が関連付けられます。次に、すべての移動イベントで、移動がピクセルの特定のしきい値 (この場合は 5) を超えているかどうかを確認します。その場合、クラスを時期尚早に元に戻し、X/Y 座標を削除します。X/Y 座標はもう必要ないからです。

于 2011-02-01T05:25:28.943 に答える