수다닷컴

드래그시에 a태그 막기

크나 2026.04.22 댓글 4

터치슬라이드를 구현중에 있는데요
ul lia href=http://aa1.html아이템1/a/li lia href=http://aa2.html아이템2/a/li lia href=http://aa3.html아이템3/a/li /ul이런식으로 되어있다면mousedownmousemovemouseup이런 이벤트를 이용해서 마우스로 드래그 합니다.문제는 드래그시에 마우스를 띄면 a태그에 주소로 이동되어 버리는 문제가 발생해서요
그래서mousemove 시에 click 이벤트에 e.preventDefault() 를 줘서 해결되는듯 했으나이동이 끝나고 나서는 click 했을때 정상적으로 페이지 이동이 일어나야하는데e.preventDefault() 를줘서 페이지 이동이 안일어납니다.
e.preventDefault() 한거를 다시 취소하는방법이 있나요?아니면 다른분들은 어떻게 이런문제를 해결하셧나요?

댓글 4

  • 좋아해 2026.04.22

    좀더 상황을 얘기해드리자면
    ul에 이벤트를 먹였습니다
    ㅜㅠ 먼가안돼네요ㅕ

  • 등대 2026.04.22

    이런형태면 되지 않을까요?

    mouseupHandler( e ){
    if( 드래그라면 ){
    e.preventDefault();
    //...
    }else{
    //...
    }
    }

  • 큰마루 2026.04.22

    네 그런데
    e.preventDefault()
    이걸해버리면
    다음부터 그 이미지를 감싼 a태그는 작동은 안해버려서요 ㅠㅠ

  • 힘차 2026.04.22

    1. 마우스 다운일때 현재 좌표를 저장
    2. 마우스 무브일때 움직여진 좌표를 저장
    3. 마우스 업때 초기 좌표와 움직여진 좌표를 비교 - 절대값( 움직여진좌표-초기좌표 )
    4.특정거리만큼 움직였다면 드래그로 판정 ( e.preventDefault() )
    5. 그렇지 않으면 클릭으로 판정

    요런식으로도 개발가능할거 같아요 ~

프로그램 개발일반 다른 글

목록