증상(Issue):
1. 클릭을 했을 경우에는 touchend Event가 정상적으로 실행이 되지만 손가락으로 누른 후 이동 후 손가락을 떼면 touchend 이벤트가 작동이 되지 않는문제
2. PC, 아이폰의 browser 에서는 정상적으로 되지만 안드로이드에서만 작동을 하지 않는다.
(Touchend event not fired if finger is dragged on the screen after touchstart)
원인(Cause):
1. Android Bug ;(
http://code.google.com/p/android/issues/detail?id=19827
http://code.google.com/p/chromium/issues/detail?id=152913
방법(Way):
touchmove event 에 다음을 추가한다.
e.preventDefault();
아래의 예제를 보고 직접 실험을 해볼 수 있다.
모바일버전에서는 blogger 자체기능으로 move 이벤트가 들어가 있어서 둘다 정상적으로 작동이 된다.
Android 단말기에서 PC버전에서 테스트를 하면 첫번째 예제는 작동하지 않는다.
(View this post to PC mode from Android browser)
실행되지 않음(X)
<div id="37934287826615485921" style="border: 1px solid red; height: 200px; width: 100%;">
</div>
<script>
function touchStart_37934287826615485921(e) {
this.innerHTML = 'start';
}
function touchEnd_37934287826615485921(e) {
this.innerHTML = 'end';
}
var testDiv = document.getElementById('37934287826615485921');
testDiv.addEventListener('touchstart', touchStart_37934287826615485921);
testDiv.addEventListener('touchend', touchEnd_37934287826615485921);
</script>
정상적으로 실행됨(O)
<div id="3793428782661548592" style="border: 1px solid blue; height: 200px; width: 100%;">
</div>
<script>
function touchStart_3793428782661548592(e) {
this.innerHTML = 'start';
}
function touchMove_3793428782661548592(e) {
e.preventDefault();
this.innerHTML = 'move';
}
function touchEnd_3793428782661548592(e) {
this.innerHTML = 'end';
}
var testDiv = document.getElementById('3793428782661548592');
testDiv.addEventListener('touchstart', touchStart_3793428782661548592);
testDiv.addEventListener('touchmove', touchMove_3793428782661548592);
testDiv.addEventListener('touchend', touchEnd_3793428782661548592);
</script>
