가로 메뉴바 마우스 스크롤 이벤트

가로 메뉴바 마우스 스크롤 이벤트

QA

가로 메뉴바 마우스 스크롤 이벤트

답변 1

본문

http://쏘.com/?device=mobile

 

가로메뉴 마우스 드롭하여 메뉴 이동 구현 중인데 메뉴가 이동은 하는데 

이동하고 클릭했던걸 놓으면 링크로 이동해버리네요

이동중엔 이동만 하고 끝냈으면 하는데 클릭이 되어 메뉴어 들어가 집니다.

 

const slider = document.querySelector('#gnb_1dul');

let isMouseDown = false;

let startX, scrollLeft;

 

slider.addEventListener('mousedown', (e) => {

  isMouseDown = true;

  slider.classList.add('active');

  if(!isMouseDown) return false;

  startX = e.pageX - slider.offsetLeft;

  scrollLeft = slider.scrollLeft;

});

 

slider.addEventListener('mouseleave', () => {

  isMouseDown = false;

  slider.classList.remove('active');

});

 

slider.addEventListener('mouseup', () => {

  isMouseDown = false;

  slider.classList.remove('active');

});

 

slider.addEventListener('mousemove', (e) => {

  if(!isMouseDown) return;

 

  e.preventDefault();

 

  const x = e.pageX - slider.offsetLeft;

  const walk = (x - startX) * 1;

  slider.scrollLeft = scrollLeft - walk;

이 질문에 댓글 쓰기 :

답변 1

<li><a href="//sir.kr/main/g5/">그누보드5</a>

코드 보시면 href 부분을 날리시거나 href="javascript:;" 정도로 수정하면 되실거세요.

 

아니면 li > a 에 대해  e.preventDefault(); 걸어줘도 되는데 위의 수정이 편하실거세요.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
  • 질문이 없습니다.
전체 0
© SIRSOFT
현재 페이지 제일 처음으로