-
Notifications
You must be signed in to change notification settings - Fork 0
/
click.html
52 lines (47 loc) · 1.32 KB
/
click.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<style>
/* カスタムメニューのスタイルを設定 */
#custom-menu {
display: none;
position: absolute;
background: white;
border: 1px solid #ccc;
padding: 5px;
}
body {
width: auto;
height: 100vh;
overflow: hidden;
}
</style>
</head>
<body id="target-element">
<!-- カスタムメニューのコンテンツ -->
<div id="custom-menu">
<ul>
<li>メニューアイテム1</li>
<li>メニューアイテム2</li>
<li>メニューアイテム3</li>
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var targetElement = document.getElementById('target-element');
var customMenu = document.getElementById('custom-menu');
// 要素で右クリックイベントを検出
targetElement.addEventListener('contextmenu', function(event) {
event.preventDefault(); // デフォルトの右クリックメニューを無効化
customMenu.style.left = event.clientX + 'px';
customMenu.style.top = event.clientY + 'px';
customMenu.style.display = 'block';
});
// クリック外領域でカスタムメニューを非表示に
document.addEventListener('click', function(event) {
customMenu.style.display = 'none';
});
});
</script>
</body>
</html>