가끔 웹서핑하다 보면 텍스트를 복사해가라고 해뒀는데, context menu를 막아둬서 모바일에선 복사할 수 없을 때가 있습니다.무분별하게 퍼진 우클릭 방지 스크립트 때문이지 싶은데, 원하시는 게 이미지의 우클릭 방지라면 이미지의 우클릭만 막을 수 있습니다. document.addEventListener("contextmenu", e => {     e.target.matches("img") && e.preventDefault() }) 심화 우클릭 방지에서 나아가 위 사진처럼 우클릭을 한 위치에 저작권 문구를 표기하는 커스텀 우클릭 메뉴 (context menu, 이하 컨텍스트 메뉴)를 만드실...

가끔 onclick, onerror 등의 이벤트가 한 번만 실행돼야 할 때가 있습니다. 가령 이미지에 에러가 있을 때 그 이미지를 다른 이미지로 교체하는 함수를 만들었을 때, 교체된 이미지에도 에러가 있다면 여러분은 콘솔에 찍히는 어마어마한 양의 404 에러를 보실 수 있을 겁니다.잡렉은 덤이고요. 다행히도, 위와 비슷한 상황을 예방할 수 있도록 이벤트 리스너가 한 번만 작동하게 할 수 있는 간단한 방법이...

제 블로그에서 드로워를 열거나, 홈 화면 슬라이더를 넘길 때 사용 중인 스와이프 감지 스크립트입니다. 굉장히 단순한 구조지만, 간단한 사용엔 크게 무리가 없습니다. let initialX = null,   initialY = null; function initTouch(e) {   initialX = `${e.touches ? e.touches[0].clientX : e.clientX}`;   initialY = `${e.touches ? e.touches[0].clientY : e.clientY}`; }; function swipeDirection(e) {   if (initialX !== null && initialY !== null) {     const currentX = `${e.touches ? e.touches[0].clientX : e.clientX}`,       currentY = `${e.touches ? e.touches[0].clientY : e.clientY}`;     let diffX = initialX - currentX,       diffY = initialY - currentY;     Math.abs(diffX) > Math.abs(diffY)     ? (       0 < diffX       ? console.log("to left")       : console.log("to right")     )     : (       0 < diffY       ? console.log("to top")       : console.log("to bottom")     )     initialX = null;     initialY = null;   } } window.addEventListener("touchstart", initTouch); window.addEventListener("touchmove", swipeDirection); window.addEventListener("mousedown", (e) => {   initTouch(e),   window.addEventListener("mousemove", swipeDirection) });...