2011-04-21 2 views
7

사전 경고 : 저는 js에 아주 익숙하며 주로 예제/튜토리얼을 웹 검색을 통해 얻었습니다.터치 인터랙션을위한 'mouseleave'에 해당하는 javascript

js는 웹과 휴대 기기 (예 : iPad)에서 모두 실행되어야합니다. 나는 touch 상당을 찾기 위해 노력하고

widget.view.bind(FLAGS.start, function(e) { 

: 같은

if (navigator.userAgent.search('Mobile') > 0) { 
    window.FLAGS = { 
    start: 'touchstart', 
    end: 'touchend', 
    move: 'touchmove', 
    click: 'click', 
    touchScreen: true 
    }; 
} else { 
    window.FLAGS = { 
    start: 'mousedown', 
    end: 'mouseup', 
    move: 'mousemove', 
    click: 'click', 
    touchScreen: false 
    }; 
} 

그런 다음 코드에서 당신이 할 수있는 일 :

우리는 mousetouch의 차이점을 추상화 도움이되는 라이브러리가 mouseleave에 대해 비슷한 트릭을 수행 할 수 있습니다.

나는 move의 위치를 ​​추적하고 해당 위젯의 경계 상자에 그것을 비교하여 leave 이벤트를 잡을 수있는 방법을 상상할 수있는,하지만 난 touchstart/mousedown 관계와 같은 작은 한 줄이있다 바라고 있어요.

답변

7

제안,하지만 AFAIK 구현되어있어이 같은 http://www.quirksmode.org/mobile/advisoryTouch.html

뭔가 (테스트되지 않은 내 머리의 상단에서를 작성하는) 일 수 있습니다

var element; 
document.addEventListener('touchstart', function(event) { 
    event.preventDefault(); 
    var touch = event.touches[0]; 
    element = document.elementFromPoint(touch.pageX,touch.pageY); 
}, false); 

document.addEventListener('touchmove', function(event) { 
    event.preventDefault(); 
    var touch = event.touches[0]; 
    if (element !== document.elementFromPoint(touch.pageX,touch.pageY)) { 
     touchleave(); 
    } 
}, false); 

function touchleave() { 
    console.log ("You're not touching the element anymore"); 
} 
+0

감사합니다. "구현되지 않음"에 관한 내용은 내가 듣기에 필요한 부분이라고 생각하며, 해결 방법을 찾기 위해 샘플 코드를 두 번이나 고맙게 생각합니다. –

+1

게시물이 오래되었지만 touchmove-event에 대해 "changedTouches"가되어서는 안됩니까? 최소한 ipads에서 touches 배열은 undefined onTouchMove입니다 - http://stackoverflow.com/a/7236327/818732를 비교하십시오 –

관련 문제