JS 자식요소 이벤트 제어

currentTarget

HTML의 부모 요소에 마우스 이벤트를 걸어 현재 마우스 이벤트가 적용 중인 target을 e.target과 같은 방식으로 확인할 수 있다. 하지만 이 경우 부모 요소 안에 자식 요소가 있는 경우, 마우스가 자식 요소로 간다면 target이 자식 요소로 변하게 된다.

 

따라서 실제 이벤트를 건 요소만 확인하기 위해서는 currentTarget을 사용하는 것이 적절하다.

const parentElement = document.getElementById("parent");

parentElement.addEventListener("mousemove", (e) => {
  console.log(e.target);
  console.log(e.currentTarget);
});

---

pointer-events 속성

이번에 프로젝트를 진행하면서, 위의 방식을 사용하지 못하는 경우가 있을 수 있다는 것을 알았다.

target의 값을 확인하는 것이 아니라, event자체의 값을 확인하는 경우가 그렇다.

 

예를 들어 부모 요소에 mousemove 이벤트를 걸어두고, 해당 요소에서의 마우스의 상대 좌표인 offsetX와 offsetY를 알아낸다고 하자. 이때는 따로 currentTarget을 사용할 부분이 없다.

const parentElement = document.getElementById("parent");

parentElement.addEventListener("mousemove", (e) => {
  console.log(`X: ${e.offsetX}, Y: ${e.offsetY}`);
});

따라서 해당 이벤트를 사용한 부모 요소 안에 자식 요소가 있다면, 마우스가 자식 요소로 들어가는 순간 부모 기준이 아닌, 자식 요소의 기준으로 좌표값이 즉시 변하게 된다.

 

하지만 여전히 부모 요소를 기준으로만 좌표값을 계산하고 싶다면, 자식 요소의 이벤트 응답을 비활성화시켜야 한다.

 

이를 위해 자식 요소의 css 속성 중 point-events라는 속성을 none으로 바꾼다.

.child {
  pointer-events: none;
}

이렇게 point-events 속성을 none으로 지정하면, HTML 요소에 정의된 클릭, hover, active, 드래그 등의 이벤트들을 비활성화시킬 수 있다.