pointer event: none 을 하지 않았을 때는 왜 슬라이더가 이상하게 동작하는지가 궁금합니다.
pointer event: none 을 한 상태에서 자식 요소들이 클릭 이벤트가 작동하도록 하는 방법이 궁금합니다.!
이벤트 버블링 때문입니다. 자식, 손자 요소들이 모두 mousemove 이벤트를 발생시키는데 그것들이 slider의 이벤트리스너에 걸립니다. 아래 콘솔로그를 넣고 슬라이딩을 해보시면 보통은 slider-img 이벤트만 잡히다가 슬라이더가 튈 때는 slider-inner 이벤트도 잡히는 것을 확인하실 수 있을거에요.
slider.addEventListener("mousemove", (e) => {
if (!pressed) return;
e.preventDefault();
console.log(`mousemove: ${e.target.getAttribute("class")}`);
x = e.offsetX;
innerSlider.style.left = `${x - startx}px`;
});
sliderImg들의 클릭 이벤트가 정상 작동하는 것으로 보입니다.
1개의 좋아요
ⓒ 자바스크립트 개발자 포럼 | 상호명 및 호스팅 서비스 제공 : 손수 | 대표 : 정현주 | 경기도 화성시 동탄장지천3길 10 | 사업자 등록번호 : 365-58-00109 | 통신판매업신고 : 2024-화성동탄-1006