감지

[JS] 특정 영역 밖을 클릭 했을 때 감지하기

예제코드 See the Pen JS OutsideClick by hyukson (@hyukson) on CodePen. 코드 class useOutsideClick { ref = null; onClickOutside = null; constructor(ref, onClickOutside) { this.ref = ref; this.onClickOutside = onClickOutside; document.addEventListener('mouseup', this.handleClickOutside); } handleClickOutside = (event) => { if (this.ref && !this.ref?.contains?.(event.target)) { this.onClickOutside(this);..

[JS] 좌표로 요소(element) 가져오기

JavaScript에서 x, y 값으로 요소를 찾을 수 있는 native 함수가 존재합니다. 해당 함수의 이름은 " elementFromPoint "입니다. const element = document.elementFromPoint(x, y); 창 기준 지정된 좌표(x, y) 값에 존재하는 element를 찾아 가장 최상위에 존재하는 요소를 반환하는 함수입니다. 여러 개의 요소가 존재할 시 최상위에 존재하는 요소를 반환합니다. 해당 좌표에 요소가 존재하지 않거나 좌표가 음수이면 null을 반환합니다. 해당 메서드는 창 기준 좌표를 사용하기에 창 안에 보이는 영역에게만 작동합니다. pointer-events 속성이 none으로 설정된 요소는 무시됩니다. 예시 코드 mousemove 이벤트를 이용하여 움직인..