목차
- oncontextmenu 예제 - 마우스오른쪽메뉴선택 시 실행
- oncontextmenu 정의
- oncontextmenu 구문
- oncontextmenu 예제 - JS 방식 경우
oncontextmenu 예제 - 마우스오른쪽메뉴선택 시 실행
[예제1] - 속성값에 JS코드 사용
<!DOCTYPE html>
<html>
<body oncontextmenu="alert('우클릭 방지');return false">
<h1>홈짱닷컴 Homzzang.com</h1>
<p>마우스 오른쪽 클릭 시 경고창 뜸.</p>
</body>
</html>
결과보기
[예제2] - 속성값에 함수 사용
<style>
div {
background: yellow;
border: 1px solid gray;
padding: 10px;
}
</style>
<div oncontextmenu="homzzang()">
<p>홈짱닷컴 Homzzang.com</p>
</div>
<script>
function homzzang() {
alert("홈짱닷컴에 오셔서 코딩 배우세요.");
}
</script>
결과보기
oncontextmenu 정의
마우스오른쪽 버튼 클릭 시 실행할 코드 지정.
1. oncontextmenu 속성 사용 가능 태그 종류
2. cf.
- oncontextmenu 속성 - 모든 브라우저 지원.
- contextmenu 속성 - 마우스오른쪽 버튼 클릭 시 뜨는 메뉴 요소의 ID 지정. (지원 브라우저 없음.)
3.
모든 브라우저 지원.
oncontextmenu 구문
HTML 방식
- <element oncontextmenu="myScript">
JS 방식 (3가지)
- object.oncontextmenu = ()=>{myScript};
- object.oncontextmenu = function(){myScript};
- object.addEventListener("contextmenu", myScript);
[속성값]
myScript
마우스오른쪽버튼 클릭 시, 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
oncontextmenu 예제 - JS 방식 경우
<!DOCTYPE html>
<html>
<body>
<h1>홈짱닷컴 Homzzang.com</h1>
<p id="hz">마우스오른쪽 버튼 클릭 시 경고창 뜸.</p>
<script>
var hz = document.getElementById("hz");
hz.addEventListener("contextmenu", function(event){
event.preventDefault();
alert("우클릭 방지");
});
</script>
</body>
</html>
결과보기
