목차
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>
결과보기
