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

작동합니다. 터치 포인트가 생성되면 (터치 시작시) "터치"라는 배열에 추가됩니다. 이러한 터치 포인트는 색인 (터치 포인트가 추가 된 순서)을 통해 액세스 할 수 있습니다. 그런 다음이 지점에서 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); 

그래서, 우리는 현재 인덱스는 X 전달하여 document.elementFromPoint() 함수이고 y가 접촉 어레이에 저장 터치 수집 좌표 어떤 요소 위에 포착 0 (인덱스 1, 2, 3 등의 배열에 더하기가 추가됩니다). 마지막으로 우리는 현재 손가락이있는 캡처 된 요소가 "myDiv"와 같은지 확인합니다. 그렇지 않은 경우 손가락이이 요소에서 벗어 났음을 알 수 있습니다.