The source codes below are Javascript, css, and HTML respectively.
I would like to right-click the contextmenu1 and contextmenu2 of the id attribute in this HTML.
I want contextmenu1 to be displayed when I right-click on class="japan" and contextmenu2 to be displayed when I right-click on other places (in id="menu"), but if I right-click on the class="japan" link in the source code below, contextmenu1 will not be displayed once.
I would like to see contextmenu1 from the first right-click, so please let me know what source code I should write.
<!DOCTYPE html>
<html>
<head>
<metacharser="UTF-8">
<meta name="viewport" content="Width=device-width">
<title> The characters entered here will be in the tag above </title>
</head>
<style>
#contextmenu1{
display: none;
position:fixed;
left:0px;
top:0px;
width —200px;
height:180px;
border —1px solid#000;
background-color:#fff;
border-radius:5px;
}
#contextmenuli{
cursor —pointer;
}
#contextmenu2{
display: none;
position:fixed;
left:0px;
top:0px;
width —200px;
height:180px;
border —1px solid#000;
background-color:#fff;
border-radius:5px;
}
#contextmenu2li{
cursor —pointer;
}
</style>
<body onContextmenu="return false;">
<divid="menu" style="width:100px;background-color:bisque;height:300px;">
<a class="japan" href="#">
<p class="food"> Yakiniku </p>
</a>
<a class="japan" href="#">
<p class="food">Sushi</p>
</a>
<a class="japan" href="#">
<p class="food">Ramen </p>
</a>
</div>
<ulid="contextmenu1">
<liid="tokyo">Tokyo</li>
<liid="osaka">Osaka</li>
<liid="nagoya">Nagoya</li>
</ul>
<ulid="contextmenu2">
<li>USA</li>
<li>UK</li>
<li>France</li>
</ul>
<script type="text/javascript">
let menu= document.getElementById('menu');
let japan = document.getElementsByClassName('japan');
let food = document.getElementsByClassName('food');
let conme1 = document.getElementById('contextmenu1');
let conme2 = document.getElementById('contextmenu2');
window.onload=function(){
menu.addEventListener('contextmenu', function(e){
conme1.style.left=e.pageX+"px"; // Move menu to mouse position
conme1.style.top=e.pageY+"px";
conme1.style.display="block";// Display menu
conme2.style.display="none";
If (e.srcElement.className==="food") {//class=food
for(leti=0;i<food.length;i++){
food[i].addEventListener('contextmenu', function(e) {// Add right-click event
document.getElementById("tokyo").onclick=function(){
alert("+food[i].innerHTML+" in Tokyo");
}
document.getElementById("osaka").onclick=function(){
alert("+food[i].innerHTML+" in Osaka");
}
document.getElementById("nagoya").onclick=function(){
alert("+food[i].innerHTML+" from Nagoya");
}
});
}
} else{
conme1.style.display="none";
conme2.style.left=e.pageX+"px"; // Move menu to mouse position
conme2.style.top=e.pageY+"px";
conme2.style.display="block";// Display menu
}
document.body.addEventListener('click', function(e) {//body's element is hidden when clicked
conme1.style.display="none"; // Hide right-click menu
conme2.style.display="none";
});
});
}
</script>
</body>
</html>
When class=food is the first event, all you do is run additional addEventListener.
<!DOCTYPE html>
<html>
<head>
<metacharser="UTF-8">
<meta name="viewport" content="Width=device-width">
<title> The characters entered here will be in the tag above </title>
</head>
<style>
#contextmenu1{
display: none;
position:fixed;
left:0px;
top:0px;
width —200px;
height:180px;
border —1px solid#000;
background-color:#fff;
border-radius:5px;
}
#contextmenuli{
cursor —pointer;
}
#contextmenu2{
display: none;
position:fixed;
left:0px;
top:0px;
width —200px;
height:180px;
border —1px solid#000;
background-color:#fff;
border-radius:5px;
}
#contextmenu2li{
cursor —pointer;
}
</style>
<body onContextmenu="return false;">
<divid="menu" style="width:100px;background-color:bisque;height:300px;">
<a class="japan" href="#">
<p class="food"> Yakiniku </p>
</a>
<a class="japan" href="#">
<p class="food">Sushi</p>
</a>
<a class="japan" href="#">
<p class="food">Ramen </p>
</a>
</div>
<ulid="contextmenu1">
<liid="tokyo">Tokyo</li>
<liid="osaka">Osaka</li>
<liid="nagoya">Nagoya</li>
</ul>
<ulid="contextmenu2">
<li>USA</li>
<li>UK</li>
<li>France</li>
</ul>
<script type="text/javascript">
let menu= document.getElementById('menu');
let japan = document.getElementsByClassName('japan');
let food = document.getElementsByClassName('food');
let conme1 = document.getElementById('contextmenu1');
let conme2 = document.getElementById('contextmenu2');
window.onload=function(){
for (leti=0;i<japan.length;i++) {
menu.addEventListener('contextmenu', function(e){
If (e.srcElement.className==="food") {//class=food
+ conme1.style.left=e.pageX+"px"; // Move menu to mouse position
+ conme1.style.top=e.pageY+"px";
+ conme1.style.display="block";// Display menu
+ conme2.style.display="none";
food[i].addEventListener('contextmenu', function(e) {// Add right-click event
- conme1.style.left=e.pageX+"px"; // Move menu to mouse position
- conme1.style.top=e.pageY+"px";
- conme1.style.display="block";// Display menu
- conme2.style.display="none";
document.getElementById("tokyo").onclick=function(){
alert("+food[i].innerHTML+" in Tokyo");
}
document.getElementById("osaka").onclick=function(){
alert("+food[i].innerHTML+" in Osaka");
}
document.getElementById("nagoya").onclick=function(){
alert("+food[i].innerHTML+" from Nagoya");
}
});
} else{
conme1.style.display="none";
conme2.style.left=e.pageX+"px"; // Move menu to mouse position
conme2.style.top=e.pageY+"px";
conme2.style.display="block";// Display menu
}
document.body.addEventListener('click', function(e) {//body's element is hidden when clicked
conme1.style.display="none"; // Hide right-click menu
conme2.style.display="none";
});
});
}
}
</script>
</body>
</html>Additional information
let japan= document.getElementsByClassName('japan');
let food = document.getElementsByClassName('food');
in the
for(leti=0;i<japan.length;i++){
I think it's strange that the loop is looped and referencing food[i] in this loop.
You are adding another event listener among the event listeners, which is too complicated.If you don't have any particular reason, you should first set up an event listener for all elements.
By rewriting it as follows, the problem has been resolved.
<script type="text/javascript">
let menu= document.getElementById('menu');
let japan = document.getElementsByClassName('japan');
let food = document.getElementsByClassName('food');
let conme1 = document.getElementById('contextmenu1');
let conme2 = document.getElementById('contextmenu2');
window.onload=function(){
menu.addEventListener('contextmenu', function(e){
if(e.srcElement.className==="food"){
conme1.style.left=e.pageX+"px"; // Move menu to mouse position
conme1.style.top=e.pageY+"px";
conme1.style.display="block";// Display menu
conme2.style.display="none";
} else{
conme1.style.display="none";
conme2.style.left=e.pageX+"px"; // Move menu to mouse position
conme2.style.top=e.pageY+"px";
conme2.style.display="block";// Display menu
}
document.body.addEventListener('click', function(e)Event when clicking on {//body element
conme1.style.display="none"; // Hide right-click menu
conme2.style.display="none";
});
});
for(leti=0;i<food.length;i++){
food[i].addEventListener('contextmenu', function(e) {// Add right-click event
document.getElementById("tokyo").onclick=function(){
alert("+food[i].innerHTML+" in Tokyo");
}
document.getElementById("osaka").onclick=function(){
alert("+food[i].innerHTML+" in Osaka");
}
document.getElementById("nagoya").onclick=function(){
alert("+food[i].innerHTML+" from Nagoya");
}
});
}
}
</script>
© 2024 OneMinuteCode. All rights reserved.