클릭

[JS] 길게 클릭(롱클릭) 이벤트 만들기

특정 요소를 정한 시간만큼 누르고 있는 행동을 Long-Click 또는 Long-Press라고 합니다. 예제코드 See the Pen Long Click by hyukson (@hyukson) on CodePen. 코드 const onlongclick = ($target, duration, callback) => { $target.onmousedown = () => { const timer = setTimeout(callback, duration); $target.onmouseup = () => { clearTimeout(timer); }; }; } 마우스로 해당 타깃을 누르는 시점을 mousedown 이벤트로 감지해 주고 특정 시간만의 setTimeout 함수를 실행해 줍니다. 만약 특정시간이 지나기 ..

[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);..