web-dev-qa-db-ja.com

Androidおよびiphoneのjavascriptを使用して長いタッチ圧力を検出する方法は？

Android and iphone？native javascript or jquery ...

私は次のような音がしたいです：

<input type='button' onLongTouch='myFunc();' />
javascriptiphoneandroidhtml5mobile-website
32
Christophe Debove

タッチエンドを使用して長いタッチを検出する際の問題は、一定時間後にイベントを発生させたい場合には機能しないことです。タッチ開始時にタイマーを使用し、タッチ終了時にイベントタイマーをクリアすることをお勧めします。次のパターンを使用できます。

var onlongtouch; 
var timer;
var touchduration = 500; //length of time we want the user to touch before we do something

touchstart() {
    timer = setTimeout(onlongtouch, touchduration); 
}

touchend() {

    //stops short touches from firing the event
    if (timer)
        clearTimeout(timer); // clearTimeout, not cleartimeout..
}

onlongtouch = function() { //do something };
47
Joshua

ジョシュアの回答の拡張バージョンは、ユーザーがマルチタッチを実行しなくなるまでコードが機能するためです（2本の指で画面をタップすると、機能が2回、4本の指-4回）トリガーされます。いくつかの追加のテストシナリオの後、非常に自由にタッチして、各タップ後に実行される機能を受け取る可能性をトリガーしました。

ユーザーが「touchend」をトリガーする前に追加のタッチスタートをロックする「lockTimer」という変数を追加しました。

var onlongtouch; 
var timer, lockTimer;
var touchduration = 800; //length of time we want the user to touch before we do something

function touchstart(e) {
        e.preventDefault();
        if(lockTimer){
                return;
        }
    timer = setTimeout(onlongtouch, touchduration); 
        lockTimer = true;
}

function touchend() {
    //stops short touches from firing the event
    if (timer){
        clearTimeout(timer); // clearTimeout, not cleartimeout..
                lockTimer = false;
        }
}

onlongtouch = function() { 
        document.getElementById('ping').innerText+='ping\n'; 
};

document.addEventListener("DOMContentLoaded", function(event) { 
  window.addEventListener("touchstart", touchstart, false);
  window.addEventListener("touchend", touchend, false);
});
<div id="ping"></div>
7
SLoN1ck

Android app：

  1. 登録済みイベントリスナー：

    var touchStartTimeStamp = 0;
var touchEndTimeStamp   = 0;

window.addEventListener('touchstart', onTouchStart,false);
window.addEventListener('touchend', onTouchEnd,false);

  2. 追加された機能：

    var timer;
function onTouchStart(e) {
    touchStartTimeStamp = e.timeStamp;
}

function onTouchEnd(e) {
    touchEndTimeStamp = e.timeStamp;

    console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds
}

  3. 時差をチェックして、私のことをやりました

これが役立つことを願っています。

2
Strabek

タッチが開始されたときと終了したときの時間差を計算できます。計算された時間差がタッチ時間を超える場合、関数名tapholdを使用します。

var touchduration = 300; 
var timerInterval;

function timer(interval) {

    interval--;

    if (interval >= 0) {
        timerInterval = setTimeout(function() {
                            timer(interval);
                        });
    } else {
        taphold();
    }

}

function touchstart() {
    timer(touchduration);
}

function touchend() {
    clearTimeout(timerInterval);
}

function taphold(){
    alert("taphold");
}


document.getElementById("xyz").addEventListener('touchstart',touchstart);
document.getElementById("xyz").addEventListener('touchend',touchend);
1
pradeep

クロスプラットフォーム開発者向け：

マウスアップ/ダウンはAndroidでは問題なく動作するように見えましたが、すべてのデバイス（サムスンtab4）ではありません。 iOSではまったく機能しませんでした。

さらなる研究では、これは要素が選択されているためと思われ、ネイティブの拡大がリスナーを中断させます。

このイベントリスナーにより、ユーザーが500ミリ秒間画像を保持している場合、サムネイル画像をbootstrap=モーダルで開くことができます。

レスポンシブ画像クラスを使用するため、画像のより大きなバージョンが表示されます。このコードは完全にテスト済みです（iPad/Tab4/TabA/Galaxy4）：

var pressTimer;  
$(".thumbnail").on('touchend', function (e) {
   clearTimeout(pressTimer);
}).on('touchstart', function (e) {
   var target = $(e.currentTarget);
   var imagePath = target.find('img').attr('src');
   var title = target.find('.myCaption:visible').first().text();
   $('#dds-modal-title').text(title);
   $('#dds-modal-img').attr('src', imagePath);
   // Set timeout
   pressTimer = window.setTimeout(function () {
      $('#dds-modal').modal('show');
   }, 500)
});
1
tyler_mitchell

右： http://m14i.wordpress.com/2009/10/25/javascript-touch-and-gesture-events-iphone-and-Android/

touchstartとtouchendを使用して、指定された時間のロングタッチを検出します

1
Pwnna