3

シンプルなボタンにタッチ ジェスチャを追加する簡単な方法を見つけるために、ウェブ全体を検索しました。基本的に、戻るボタン (通常は iOS デバイスの上部にあるタスクバーに表示されます) を取得して、CSS クラスを「通常」の状態から「押された」状態に変更する簡単な方法を見つけようとしています。

私は Javascript を初めて使用しますが、jQuery (または他のライブラリ) よりも標準の DOM メソッドを使用することを好みます。ontouchstartJavaScript コードがandontouchendイベントを読み取る方法と、これらの関数を使用して CSS クラスを変更する方法を説明する完全なコードを持っている人はいますか?

どんな助けでも大歓迎です！

TC

4

3 に答える 3

6

ontouchstart、ontouchmoveおよびontouchendなどと同じように管理されonclickますonmousemove。

リスナーをタグに適用するか、要素<script>に直接適用できます。html

JavaScript のみを使用する


var back = document.getElementById("back-button-id");

back.ontouchstart = function( event ) {
 // using the target property of the event
 // you can reach the hitted html element
 event.target.className = 'css-href-selected-class-name';
}

back.ontouchend = function( event ) {
 event.target.className = 'css-href-normal-class-name';
}

HTML タグとコールバックの使用

1) Javascript コールバックを宣言して、css クラスを任意の状態に交換します。


function onclickCallback( event ) {
 // do something
}

function ontouchstartCallback( event ) {
 event.target.className = 'selected';
}

function ontouchendCallback( event ) {
 event.target.className = 'normal';
}

2）コールバックをアンカータグに入れます（DIV代わりに使用することをお勧めしますA）


<div class="normal" onclick="onclickCallback( event );" ontouchstart="ontouchstartCallback( event );" ontouchend="ontouchendCallback( event );">Back</div>

編集1：スクロール中にハイライトがフリーズするのを防ぐ

ontouchmove ハンドラを追加してみてください

ontouchmove="ontouchmoveCallback( event );"

次に、css クラスをスワップするハンドラー関数を宣言します。

function ontouchmoveCallback( event ) {
    event.target.className = 'normal';
}

お役に立てれば！チャオ。

于 2011-02-01T03:01:36.667 に答える
2

これで始められるはずです：

HTML:

 <input type="button" id="thebutton" value="Do Stuff!" />

Javascript:

 var thebutton = document.getElementById("thebutton");

 thebutton.ontouchstart = function(e)
 {
     this.setAttribute('class', 'pressed');

     var touches = e.touches; // array of all touch data

     var target = touches[0].target; // what DOM element was touched
     var pageX = touches[0].pageX; // coords relative to site
     var pageY = touches[0].pageY;
     var clientX = touches[0].clientX; // coords relative to screen
     var clientY = touches[0].clientY;
 };

 thebutton.ontouchmove = function(e)
 {
     var touches = e.touches; // same fields as above
     var changedTouches = e.changedTouches; // only touches which have changed
 };

 thebutton.ontouchend = function(e)
 {
     this.setAttribute('class', '');

     // cleanup, if needed
 };

詳細については、http ://sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/ を参照してください。

MobileSafari は、タッチ イベントやフォーム要素 (特に入力ボックス) で奇妙なことをすることがあります。実際の入力ボタンよりも、スタイル付きの div を使用する方がよい場合があります。

編集:あなたがやろうとしていることについては、単純なクリックイベントを使用した方がよいと思います.これは通常、ボタンの押下などでうまく機能します. タッチイベントは、ドラッグアンドドロップ、正確な指の追跡などに適しています。これを試してください:

thebutton.onclick = function(e) { this.setAttribute('class', 'your_class'); };

EDIT2：あなたが何を求めているのかわかりました。最も簡単な方法はこれです：

thebutton.ontouchstart = function(e) { this.setAttribute('class', 'pressed'); };
thebutton.ontouchend   = function(e) { this.setAttribute('class', ''); };
于 2011-02-01T02:17:30.350 に答える
1

jQuery用のライブラリがすでにいくつかあります

http://plugins.jquery.com/project/multiswipe

また、このデモを次の場所から確認することもできます

http://taitems.github.com/Mobile-Web-based-Gesture-Recognition/

そして、サンプルをフォークして作業を開始できます。

いくつかのオプションがありますが、すべてがまったく新しいものです。

于 2011-02-01T02:13:56.690 に答える