Javascript
DOM 이벤트 전파 제어
뮹뭉묵목몽묭
2019. 7. 24. 05:02
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> DOM 이벤트 연습</title>
<script>
</script>
</head>
<body>
<p>
일잔적인 글
<span id="prevent">이벤트를 막은 글</span>
<br>
일반적인 글 2
</p>
<script>
const normalPE1 = document.querySelector("p");
const eventPreventedE1 = document.querySelector('#prevent');
normalPE1.addEventListener('contextmenu', function () {
console.log('contextmenu 호출');
});
eventPreventedE1.addEventListener('contextmenu', function(event) {
console.log('이벤트 막은 글 클릭');
event.stopPropagation();
event.preventDefault();
});
</script>
</body>
</html>
|
cs |
일반적으로 마우스 오른쪽을 클릭하면 컨텍스트 메뉴가 보인다. 이때 발생하는 contextmenu 이벤트에 리스너 함수를 등록한다. 함수 내에서 이벤트 객체의 stopPropagation 메소드를 통해 이벤트를 상위로 전파 되지 않도록 한다. 그래스 부모의 <p> 요소에 등록된 이벤트 리스너가 호출되지가 않는다. 그리고 이벤트 객체의 preventDefault() 메소드를 통해 브라우저에서 정의한 기본행위 또한 막는다. 그러면 마우스 오른쪽을 클릭해도 컨텍스트 메뉴가 보이지 않게된다.