[ Javascript ] 마우스 우클릭 이벤트 ( onContextMenu )

마우스 우클릭 이벤트인 onContextMenu에 대한 내용입니다.

마우스 좌클릭 이벤트인 onClick에 대해서는 대부분 알 것으로 생각됩니다.

그림사이트, 저작권 사이트 등이 조금이라도 컨텐츠들을 지키기위해 사용할 수 있는 우클릭 방지입니다.

 

javascript

onContextMenu(e => {
    e.preventDefault();
})

// ----- //

document.oncontextmenu = function() { return false; };

 

html

<div oncontextmenu="return false">
    내용
</div>

// next.js에서 사용했을 때----- //
<div onContextMenu={(e) => e.preventDefault()}>
    내용
</div>

기본 html, 프레임워크 등 어디서 사용하느냐에 따라서 조금씩 생김새가 다를 수 있습니다.

 

그 외 여러가지 내용

• onContextMenu: 우클릭 시
• onSelect: 일부 텍스트 선택 시
• onDragStart: 이미지 드래그 시
• onKeyDown: 키 입력 시
• onClick: 좌클릭 시

등등 여러가지 내용이 있습니다 !