가끔 웹서핑하다 보면 텍스트를 복사해가라고 해뒀는데, context menu를 막아둬서 모바일에선 복사할 수 없을 때가 있습니다.
무분별하게 퍼진 우클릭 방지 스크립트 때문이지 싶은데, 원하시는 게 이미지의 우클릭 방지라면 이미지의 우클릭만 막을 수 있습니다.

document.addEventListener("contextmenu"e => {
    e.target.matches("img"&& e.preventDefault()
})

심화

우클릭 방지에서 나아가 위 사진처럼 우클릭을 한 위치에 저작권 문구를 표기하는 커스텀 우클릭 메뉴 (context menu, 이하 컨텍스트 메뉴)를 만드실 수도 있습니다.

HTML

<div id="rightClick" class="hidden">© Marshall K</div>

엘리먼트를 하나 추가합니다.
당연히 내부엔 아무 말이나 적으셔도 됩니다.

CSS

#rightClick {
    position: absolute;
    padding: 5px 10px;
    background: rgba(000.5);
    color: #fff;
    border-radius: 10px;
    font-size: 10px
}
#rightCLick.hidden {
    display: none
}

자바스크립트에서 left와 top 값을 줄 예정이니, CSS에선 아무런 작업을 하지 않으셔도 됩니다.

Javascript

const rightClickElem = document.getElementById("rightClick");

document.addEventListener("contextmenu"e => {
    const bodyWidth = document.body.clientWidth;
    let rceWidth;
    e.target.matches("img"&& (
        e.preventDefault(),
        rightClickElem.classList.remove("hidden"),
        rceWidth = Math.ceil(rightClickElem.getBoundingClientRect().width),
        rightClickElem.style.left = `${
            e.pageX >= bodyWidth - rceWidth
            ? (
                rceWidth >= bodyWidth
                ? 0
                : bodyWidth - rceWidth
            )
            : e.pageX
        }px`,
        rightClickElem.style.top = `${e.pageY - rightClickElem.clientHeight}px`
    );
}),
document.addEventListener("mousedown", () => {
    rightClickElem.classList.add("hidden"),
    rightClickElem.style.left = 0,
    rightClickElem.style.top = 0;
});

contextmenu가 활성화될 때, 타겟이 이미지면 이벤트의 실행을 방지합니다.

body의 너비에서 컨텍스트 메뉴의 left 값을 뺀 값이 컨텍스트 메뉴의 너비보다 작아지면 컨텍스트 메뉴 내부의 글자가 깨지므로, left 값을 나름 세심하게 주려고 노력해봤습니다.
더 좋은 방법이 있나 싶어서 custom context menu 등으로 검색해봐도, 대부분 left와 top 값을 clientX 값으로 주는 게 끝이더라고요.


이상, 이미지의 우클릭을 방지하고 커스텀 컨텍스트 메뉴로 저작권을 표시하는 방법이었습니다.

부디 텍스트를 복사하거나 붙여 넣을 필요가 있는 공간에 무분별하게 우클릭 방지 스크립트를 넣는 걸 삼가주세요. 😥

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 왠지 찔리는데요 ^^
    저의 경우,
    우클릭방지 목적보다는 다른 메뉴를 사용하는게 목적이라... ^^

    참 이전에 물어보던 이모티콘 팝업 클릭시 복사 및 붙혀넣기 되는게 보니 동일한 도메인에서만 되드라구요.
    이모티콘으로 쓰는 팝업을 글쓰기 창에 넣으려다 로딩속도가 너무 느려 포기 ㅋㅋ
    잘~~ 바쁘게 지내시나봅니다 ㅎㅎ

    https://i.imgur.com/aOLsvqq.mp4

    1. 그냥 무작정 차단만 해놓는 분들 얘기를 한 겁니다. ㅋㅋㅋ

      보안을 위해 iframe의 엘리먼트 추가 / 제거, canvas 이미지 다운로드 등 동일한 도메인에서만 가능한 옵션이 꽤 많습니다.
      클립보드 제어도 그런 맥락이 아닐까 싶네요.

      저도 이모티콘을 외부 창이 아닌 레이어로 넣으려다가, 아무래도 신경 써줘야 할 부분이 많아서 포기했습니다. 😥
      카카오톡처럼 탭을 분류하고, 이미지의 너비 / 높이를 맞추면 될 것 같은데, 아무래도 그것까진 좀 귀찮네요...ㅋㅋㅋ