DOM要素のTouchLeave

Question

大丈夫ですので、ここで取り上げます。ページ上のdiv要素を押すと、ページ上の数字が増えます。 これはかなり簡単ですが、私はこれもIPadとAndroidデバイスでも動作させたいと思っています。

私はdivでjquery bindを使用してtouchstartイベントを使用しています。 setIntervalを使用して番号を更新します（数値が増加するたびにsetTimeoutを呼び出すことができますが、それは無関係です）。 指（タッチ）がdivの外側に移動すると、間隔がクリアされます。残念ながら、指が画面から離されるまでは触れられません。 モバイルサファリまたはウェブキットはタッチリーブをサポートしていないようです。

ここに私の質問：touchleaveを模倣する方法に関するアイデア？

Answer 1

上記の回答に基づいて、私がしていることは次のとおりです。

var $this = $('elementselector'); 
var fnmove = function (e) { 
e.preventDefault(); 
e = e.originalEvent; 
var touch = e.touches[0] || e.changedTouches[0]; 
    if (!_isInBounds(touch, $this.offset(), $this.outerWidth(), $this.outerHeight())) { 
     $this.trigger(touch_leave_event); 
     $this.unbind(touch_move_event, fnmove); 
    }; 
}; 
$this.bind(touch_move_event, fnmove); 

- インバウンズは私が見つけた最良の方法は、あなたのtouchmoveハンドラ内タッチポイントの位置を確認することである

function _isInBounds(touch, elemposition, width, height) { 
    var left = elemposition.left, 
     right = left + width, 
     top = elemposition.top, 
     bottom = top + height, 
     touchX = touch.pageX, 
     touchY = touch.pageY; 

    return (touchX > left && touchX < right && touchY > top && touchY < bottom); 
}; 

Answer 2

EDIT（これを完了するギヨームのおかげで）：短い答えて申し訳ありません

var $this = $('elementselector'); 
var fnmove = function (e) { 
e.preventDefault(); 
e = e.originalEvent; 
var touch = e.touches[0] || e.changedTouches[0]; 
    if (!_isInBounds(touch, $this.offset(), $this.outerWidth(), $this.outerHeight())) { 
     $this.trigger(touch_leave_event); 
     $this.unbind(touch_move_event, fnmove); 
    }; 
}; 
$this.bind(touch_move_event, fnmove); 

function _isInBounds(touch, elemposition, width, height) { 
    var left = elemposition.left, 
     right = left + width, 
     top = elemposition.top, 
     bottom = top + height, 
     touchX = touch.pageX, 
     touchY = touch.pageY; 

    return (touchX > left && touchX < right && touchY > top && touchY < bottom); 
}; 

、私は仕事を残しています。私は空白を埋めるために戻ってきます。しかし、あなたはその考えを得るべきです。

Answer 3

機能します。タッチポイントが（タッチスタート時に）作成されると、それは「touches」と呼ばれる配列に追加されます。これらのタッチポイントは、インデックス（タッチポイントが追加された順序）によってアクセスできます。次に、この点からx座標とy座標にアクセスして、観測している要素の境界内にまだあるかどうかを判断できます。私が "myDiv"と呼ばれるdivを持っていて、ユーザーの指がその中からドラッグされたときを検出したいとしましょう。我々は指を動かすと

var myDiv = document.getElementById('myDiv'); 
myDiv.addEventListener('touchmove', function(event){ 
    var currentElement = document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY); 
    if (currentElement.id !== 'myDiv'){ 
     console.log('finger has moved outside of element'); 
    } 
}, false); 

そこで、我々はそれが現在document.elementFromPoint（）関数である要素の上に捕捉、x、y座標を渡し、インデックスに、タッチ・アレイに記憶されたタッチから収集0（添え字がインデックス1,2,3などの配列に追加されます）。最後に、私たちの指が現在ある捕捉された要素が "myDiv"と同じかどうかを調べます。そうでない場合は、指がこの要素の外に移動したことがわかります。