携帯サイトを書いています。タッチ イベントを正確に制御する方法を理解したいと思います。要素の上でタッチイベントがいつ開始および終了するかを確認することはできますが、その間に何が起こるかを管理するのは難しいようです。
次のようなシンプルなボタンが必要です。
- Aクラスから始まり、
- タッチスタートで、別のクラス B (「ホバーステート」) を取得します。
- クリックされた要素の上でタッチ イベントが終了すると、別のクラス C が取得されます。
- タッチ イベントが、最初にクリックされた要素の上ではなく終了すると、元のクラス A に戻ります。
- タッチ イベントが要素上で停止すると (まだ終了していない)、要素はクラス A に戻り、
- タッチ イベントが要素の上にあるのをやめたが、再び要素の上に戻った場合 (すべて同じタッチ イベント - つまり、まだ touchend または touchcancel がない)、再びクラスBに戻ります (ホバー状態)。
さらに、次のことを確認したいと思います。
- 1 つのボタンで開始されたクリック イベントは、他のボタンのクラスに干渉しません。
- ボタン内にdiv がある場合(テキスト スパンとしましょう)、どの状態にも干渉しません。
- 理想的には、これをまとめて実行できます (つまり、$('.everyButton').on('whatever', ....))
私はjQueryを使用していますが、何でも役に立ちます。これはかなり簡単なように思えますが、やりたいことを実現するのに苦労しています。誰でもこれに適したデザインを持っていますか？