슬라이더 pointer-events 에러 관련 도와주세요!!

JavaScript
,
1

자바스크립트로 슬라이더를 만들고 있습니다.

슬라이더를 구현할 때, pointer-event: none 을 하지 않으면 다음과 같이 슬라이더가 정상적으로 동작 하지 않습니다.
JTEdj

따라서, 부모 요소에 pointer-event: none 하면 정상적으로 슬라이더가 동작하는 것을 볼 수 있습니다.
kd9PB

저는 슬라이더 안에 있는 요소를 클릭 할 수 있도록 하고 싶습니다.

하지만, 부모요소에 pointer-event: none 을 하면 클릭 이벤트를 등록해도 동작하지 않습니다.

제가 궁금한 것은 다음과 같습니다.

  1. pointer event: none 을 하지 않았을 때는 왜 슬라이더가 이상하게 동작하는지가 궁금합니다.
  2. pointer event: none 을 한 상태에서 자식 요소들이 클릭 이벤트가 작동하도록 하는 방법이 궁금합니다.!

제 코드 샌드박스입니다!

감사합니다 :slight_smile:

3

제가 궁금한 것은 다음과 같습니다.

  1. pointer event: none 을 하지 않았을 때는 왜 슬라이더가 이상하게 동작하는지가 궁금합니다.
  2. pointer event: none 을 한 상태에서 자식 요소들이 클릭 이벤트가 작동하도록 하는 방법이 궁금합니다.!
  1. 이벤트 버블링 때문입니다. 자식, 손자 요소들이 모두 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`;
});
  1. sliderImg들의 클릭 이벤트가 정상 작동하는 것으로 보입니다.
1개의 좋아요