EN
JavaScript - onclick event doesn't work on custom context menu items
1 answers
0 points
Hi, I've tried to make a custom context menu using JavaScript and I have got a problem with the click event.
I've added console.log() to each item inside my context menu to be executed on click event but it doesn't work and I don't know why. Can you help me with this?
Here's my code:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
border: 1px solid gray;8
border-radius: 5px;9
height: 200px;10
padding: 10px;11
}12
13
div.context-menu {14
padding: 2px;15
position: fixed;16
background: lightgray;17
z-index: 1000;18
}19
20
div.context-menu.hidden {21
display: none;22
}23
24
div.context-menu.visible {25
display: block;26
z-index: 999999;27
}28
29
div.context-menu div.item {30
padding: 6px 10px;31
}32
33
div.context-menu div.item:hover {34
background: gray;35
}36
37
</style>38
</head>39
<body>40
<div>Right click to open context menu</div>41
<div id="context-menu" class="context-menu hidden">42
<div class="item" onclick="console.log('item1 clicked')">Menu item 1</div>43
<div class="item" onclick="console.log('item2 clicked')">Menu item 2</div>44
<div class="item" onclick="console.log('item3 clicked')">Menu item 3</div>45
</div>46
<script>47
48
var contextMenu = document.querySelector('#context-menu');49
50
document.addEventListener('contextmenu', function(event) {51
event.preventDefault();52
53
contextMenu.style.top = event.clientY + 'px';54
contextMenu.style.left = event.clientX + 'px';55
56
contextMenu.classList.remove('hidden');57
contextMenu.classList.add('visible');58
});59
60
document.addEventListener('mousedown', function(event) {61
contextMenu.classList.remove('visible');62
contextMenu.classList.add('hidden');63
});64
65
</script>66
</body>67
</html> 1 answer
0 points
It seems like the context-menu is closing before you click on the item because of the mousedown event added to the document. Change the mousedown to the mouseup event and it works fine.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
border: 1px solid gray;8
border-radius: 5px;9
height: 200px;10
padding: 10px;11
}12
13
div.context-menu {14
padding: 2px;15
position: fixed;16
background: lightgray;17
z-index: 1000;18
}19
20
div.context-menu.hidden {21
display: none;22
}23
24
div.context-menu.visible {25
display: block;26
z-index: 999999;27
}28
29
div.context-menu div.item {30
padding: 6px 10px;31
}32
33
div.context-menu div.item:hover {34
background: gray;35
}36
37
</style>38
</head>39
<body>40
<div>Right click to open context menu</div>41
<div id="context-menu" class="context-menu hidden">42
<div class="item" onclick="console.log('item1 clicked')">Menu item 1</div>43
<div class="item" onclick="console.log('item2 clicked')">Menu item 2</div>44
<div class="item" onclick="console.log('item3 clicked')">Menu item 3</div>45
</div>46
<script>47
48
var contextMenu = document.querySelector('#context-menu');49
50
document.addEventListener('contextmenu', function(event) {51
event.preventDefault();52
53
contextMenu.style.top = event.clientY + 'px';54
contextMenu.style.left = event.clientX + 'px';55
56
contextMenu.classList.remove('hidden');57
contextMenu.classList.add('visible');58
});59
60
// change mousedown to mouseup here:61
// |62
// V63
document.addEventListener('mouseup', function(event) {64
contextMenu.classList.remove('visible');65
contextMenu.classList.add('hidden');66
});67
68
</script>69
</body>70
</html>0 commentsShow commentsAdd comment
