2010-12-17 7 views
1

touchEndイベントリスナーのボタンがあります。私がボタンに触れ、ボタンから指をスライドさせてからタッチを離すと、タッチイベントを「キャンセル」したいと思います。私は、次のonClickを使用しない場合モバイルSafariでタッチ操作をキャンセルするにはどうすればよいですか?

これは正しく動作します。

buttonElement.addEventListener('click', function (event) { 
    if (event.target === this) { 
    // Do something 
    } 
}); 

はしかし、これは「touchEnd」では動作しませんので、(この場合はbuttonElement)要素ではなく元のからevent.targetポイントタッチをリリースした要素に移動します。

"touchMove"にフラグを設定する以外に、これを行うための一般的な方法がありますか?ありがとう!

答えて

1

タッチイベント:touchstart、touchmove、touchcancel、touchendを使用します。 Apple docsを参照してください。

それにかかわらず、私はイベントをキャンセルしようとは思わない。イベントでは、私は "カーソル"(指)の位置を確認し、それが領域の外にあった場合は、単に機能を発射しないでください。

+0

これは適切な方法です。 touchcancelは、ユーザーが通話を受信したり、通知をプッシュするようなことが起こった場合にのみ呼び出されます。 – ughoavgfhw

+0

うん、私はtouchCancelがどのようにトリガーされたかを知っているので、引用符で "キャンセル"する。だから、基本的にイベントリスナーの外にある状態を追跡する方法はありませんか? – thatmarvin

0

私はその質問が古いことを知っていますが、私は同じことをやり遂げる方法を探していますし、うまく動作するコードを書いています。

タッチを動かすとデフォルトの動作がキャンセルされます。私のウェブアプリケーションではうまく動作し、フィードバックはマウスアップやマウスイベントを処理するよりはるかに優れています。モバイルサファリでは遅すぎます。

var moved=false; 

function touchstart(){ 
    moved=false; 
    //highlight button for feedback 
} 

function touchmove(){ 
    moved=true; 
} 

function touchend(){ 
    //undo-highlight the button 

    if(moved) touchcanceled(); 
    else action(); 
} 

function touchcanceled(){ 
    //user just flicked the button, 
    //probably scrolling the view 
} 

function action(){ 
    alert("You triggered me!"); 
} 

*

0

長い時間前に彼らのそれぞれのイベントリスナーにこの機能を追加しますが、私はちょうどこの質問には受け入れ答えはまだありませんので、私の2cが価値を追加したいです。

touchCancelは現時点でモバイルプラットフォームではあまり信頼できません。

参照: http://alxgbsn.co.uk/2011/12/23/different-ways-to-trigger-touchcancel-in-mobile-browsers/

また、あなたはあなた自身のソートのHammer.JS

で行われているもののようなイベントのオーバーレイあなたがキャンセルする前に、ジェスチャーの種類を決定することができる方法を書くのルートを行くことができます。

関連する問題