SeouliteLab
jQuery .contextmenu() 메소드를 활용한 이벤트 처리 본문
jQuery의 .contextmenu() 메소드는 요소에 우클릭 이벤트 핸들러를 추가하는 데 사용됩니다. 이를 통해 사용자가 요소를 우클릭할 때마다 원하는 동작을 실행할 수 있습니다.
예제 1: 우클릭 시 메뉴 표시
<!DOCTYPE html>
<html>
<head>
<title>jQuery .contextmenu() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myDiv').contextmenu(function(e){
e.preventDefault(); // 기본 우클릭 메뉴 차단
alert('우클릭 메뉴가 표시되었습니다!');
});
});
</script>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>
</body>
</html>결과:
myDiv요소에 우클릭하면 "우클릭 메뉴가 표시되었습니다!" 라는 경고창이 표시됩니다.
설명:
이 예제에서는 .contextmenu() 메소드를 사용하여 myDiv ID를 가진 요소에 우클릭 이벤트 핸들러를 추가합니다. 우클릭 이벤트가 발생하면 기본 우클릭 메뉴가 차단되고 경고창이 표시됩니다.
예제 2: 우클릭 시 스타일 변경
<!DOCTYPE html>
<html>
<head>
<title>jQuery .contextmenu() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myButton').contextmenu(function(e){
e.preventDefault(); // 기본 우클릭 메뉴 차단
$(this).css('background-color', 'yellow');
});
});
</script>
</head>
<body>
<button id="myButton">우클릭하세요</button>
</body>
</html>결과:
myButton버튼을 우클릭하면 버튼의 배경색이 노란색으로 변경됩니다.
설명:
이 예제에서는 .contextmenu() 메소드를 사용하여 myButton ID를 가진 버튼에 우클릭 이벤트 핸들러를 추가합니다. 우클릭 이벤트가 발생하면 기본 우클릭 메뉴가 차단되고 버튼의 배경색이 노란색으로 변경됩니다.
예제 3: 우클릭으로 컨텍스트 메뉴 표시
<!DOCTYPE html>
<html>
<head>
<title>jQuery .contextmenu() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myMenu').hide(); // 초기에 숨김
$('#myDiv').contextmenu(function(e){
e.preventDefault(); // 기본 우클릭 메뉴 차단
$('#myMenu').css({
top: e.pageY + 'px',
left: e.pageX + 'px'
}).show();
});
});
</script>
<style>
.context-menu {
position: absolute;
background-color: lightgray;
padding: 5px;
border: 1px solid gray;
list-style: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>
<ul id="myMenu" class="context-menu">
<li>메뉴 항목 1</li>
<li>메뉴 항목 2</li>
<li>메뉴 항목 3</li>
</ul>
</body>
</html>결과:
myDiv요소에 우클릭하면 컨텍스트 메뉴가 해당 위치에 표시됩니다.
설명:
이 예제에서는 .contextmenu() 메소드를 사용하여 myDiv ID를 가진 요소에 우클릭 이벤트 핸들러를 추가합니다. 우클릭 이벤트가 발생하면 기본 우클릭 메뉴가 차단되고 myMenu ID를 가진 컨텍스트 메뉴가 해당 위치에 표시됩니다.
예제 4: 우클릭으로 컨텍스트 메뉴 숨김
<!DOCTYPE html>
<html>
<head>
<title>jQuery .contextmenu() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(document).contextmenu(function(){
$('#myMenu').hide();
});
});
</script>
<style>
.context-menu {
position: absolute;
background-color: lightgray;
padding: 5px;
border: 1px solid gray;
list-style: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>
<ul id="myMenu" class="context-menu">
<li>메뉴 항목 1</li>
<li>메뉴 항목 2</li>
<li>메뉴 항목 3</li>
</ul>
</body>
</html>결과:
- 문서 어디를 우클릭해도 컨텍스트 메뉴가 숨
겨집니다.
설명:
이 예제에서는 문서 전체에 대해 .contextmenu() 메소드를 사용하여 우클릭 이벤트 핸들러를 추가합니다. 우클릭 이벤트가 발생하면 컨텍스트 메뉴가 숨겨집니다.
예제 5: 우클릭으로 요소 삭제
<!DOCTYPE html>
<html>
<head>
<title>jQuery .contextmenu() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myDiv').contextmenu(function(e){
e.preventDefault(); // 기본 우클릭 메뉴 차단
$(this).remove(); // 요소 삭제
});
});
</script>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>
</body>
</html>결과:
myDiv요소에 우클릭하면 해당 요소가 삭제됩니다.
설명:
이 예제에서는 .contextmenu() 메소드를 사용하여 myDiv ID를 가진 요소에 우클릭 이벤트 핸들러를 추가합니다. 우클릭 이벤트가 발생하면 해당 요소가 삭제됩니다.
jQuery의 .contextmenu() 메소드를 사용하면 웹 페이지에서 우클릭 이벤트를 처리할 수 있습니다. 이를 활용하여 사용자에게 커스텀한 컨텍스트 메뉴를 제공하거나 특정 동작을 실행할 수 있습니다.
'프로그래밍' 카테고리의 다른 글
| 이벤트 위임을 위한 jQuery .delegate() 메소드 (0) | 2024.04.02 |
|---|---|
| jQuery .dblclick() 메소드를 활용한 이벤트 처리 (0) | 2024.04.02 |
| 클릭 이벤트 처리를 위한 jQuery .click() 메소드 (0) | 2024.04.02 |
| jQuery .change() 메소드를 활용한 이벤트 처리 (0) | 2024.04.02 |
| jQuery .blur() 메소드를 활용한 이벤트 처리 (0) | 2024.04.02 |