이 코드 도대체 어떻게 작동되는건가요?

Question

var items &#61; $('#items a'); // Notice I changed the selector here function start(event) { event.preventDefault(); console.log('touchstart mousedown'); items.off('click'); items.on('touchmove mousemove', move); items.on('touchend mouseup', end); return false; } function move(event) { items.on('click', function(event){ event.preventDefault(); }); console.log('touchmove mousemove'); return false; } function end(event) { console.log('touchend mouseup'); items .off('touchmove mousemove') .off('touchend mouseup'); return false; } items.on('touchstart mousedown', start);코드 전문 touchstart랑 click을 구분해주는 코드 같은데 매커니즘이 도저히 이해가 안갑니다결과물은 &#96;유저가 elements를 어떤 방식으로 작동시켰느냐&#96; 를 기준으로 &#96;a태그 작동&#96; or &#96;미작동&#96;으로 나뉘는데요이해가 안되는 부분은 start의 off와 move의 on 부분입니다. 1. 왜 move 함수에서 click 이벤트가 on으로 바뀌었는데도 a태그가 작동을 안하는건가요?- 작동되는 결과를 기준으로 생각해봤을때 move에서는 오히려 &#96;on&#96;이 아닌 &#96;off&#96;여야하지 않은가요? &#96;elements를 드래그할 경우 a 태그를 작동시키지 않는다&#96; 이니까요. 2. start 함수에서 click 이벤트를 off로 바꾼것도 이해가 안됩니다.만약 &#96;off&#96; 메소드로 특정 이벤트가 비활성화 된 것을 &#96;e&#96;가 받는 구조라면 start 함수에서 e가 다음 함수로 전달되는 경우는 2가지 경우가 존재할텐데 ㄱ. 클릭 -> 클릭 종료 (&#96;start(e)&#96; -> &#96;end(e)&#96;) ㄴ. 클릭 -> 드래그 -> 클릭 종료 (start(e) -> move(e) -> end(e));이럴 경우 end 함수로 넘어간 시점에서 여전히 off 상태인 e에 의해 a 태그가 작동되지 않아야한다고 생각하는데 결과는 완전히 반대로 나옵니다. click 이벤트가 작동되는지 콘솔로 확인하는 방법은 모르겠어서 구조를 파고드는데 한계가 있네요.지금 저 코드 자체가 기능적으로 문제가 있긴 합니다만 어떻게 작동되는지는 알고 싶습니다 (모바일 상태에서는 터치해도 a 태그가 작동이 안되는 부분)

Gear · Answer

잘못 짐작하신것 같습니다. preventDefault에 대해 알아보시면 되겠습니다.

IBZ · Answer

&#64;Gear 어떻게 작동하는지에 관한 구조 설명이 필요한데 간단하게나마 설명해주실 수 있나요?

이 코드 도대체 어떻게 작동되는건가요?

2개의 답변

#touch 목록