IBZ
97
2019-03-24 17:18:40
2
833

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


var items = $('#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을 구분해주는 코드 같은데 매커니즘이 도저히 이해가 안갑니다

결과물은 `유저가 elements를 어떤 방식으로 작동시켰느냐` 를 기준으로 `a태그 작동` or `미작동`으로 나뉘는데요

이해가 안되는 부분은 start의 off와 move의 on 부분입니다.


1. 왜 move 함수에서 click 이벤트가 on으로 바뀌었는데도 a태그가 작동을 안하는건가요?

- 작동되는 결과를 기준으로 생각해봤을때 move에서는 오히려 `on`이 아닌 `off`여야하지 않은가요? `elements를 드래그할 경우 a 태그를 작동시키지 않는다` 이니까요.


2. start 함수에서 click 이벤트를 off로 바꾼것도 이해가 안됩니다.

만약 `off` 메소드로 특정 이벤트가 비활성화 된 것을 `e`가 받는 구조라면 start 함수에서 e가 다음 함수로 전달되는 경우는 2가지 경우가 존재할텐데

  ㄱ. 클릭 -> 클릭 종료 (`start(e)` -> `end(e)`)
  ㄴ. 클릭 -> 드래그 -> 클릭 종료 (start(e) -> move(e) -> end(e));

이럴 경우 end 함수로 넘어간 시점에서 여전히 off 상태인 e에 의해 a 태그가 작동되지 않아야한다고 생각하는데 결과는 완전히 반대로 나옵니다.


click 이벤트가 작동되는지 콘솔로 확인하는 방법은 모르겠어서 구조를 파고드는데 한계가 있네요.

지금 저 코드 자체가 기능적으로 문제가 있긴 합니다만 어떻게 작동되는지는 알고 싶습니다 (모바일 상태에서는 터치해도 a 태그가 작동이 안되는 부분)

0