js create onclick event for dynamically appeared menu

Question

I want to add onclick events for dynamically created popup menu on site. Here is a code:

<div id="rmenu">
   <div class="rmenu_options">
        <a href="#" id="start" >Create starting point</a>
   </div>
   <div class="rmenu_options">
       <a href="#" id="goal">Create goal point</a>
   </div>
</div>

.rmenu_options {
    margin-bottom: 7px;
    cursor: pointer;
    }
#rmenu {
    display: none;
    position: absolute;
    background: bisque;
    width: 175px;
    height: 55px;
    padding: 10px;
    border-radius: 6px;
    font-size: 18px;
}

// create mouse rightclick menu

function mouseX(evt) {
    if (evt.pageX) {
        return evt.pageX;
    } else if (evt.clientX) {
        return evt.clientX + (document.documentElement.scrollLeft ?
    document.documentElement.scrollLeft :
    document.body.scrollLeft);
    } else {
        return null;
    }
}

function mouseY(evt) {
    if (evt.pageY) {
        return evt.pageY;
    } else if (evt.clientY) {
        return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    } else {
        return null;
    }
}

window.oncontextmenu = function openRightClickMenu (e) {
    e.preventDefault();
    document.getElementById("rmenu").style.display = "block";
    document.getElementById("rmenu").style.top = mouseY(e) + 'px';
    document.getElementById("rmenu").style.left = mouseX(e) + 'px';
    document.getElementById("rmenu").classList.add("opened");

    window.event.returnValue = false;
}

// remove mouse rightclick menu

document.onmousedown = function removeRightClickMenu (e) {
    if (e.which == 1) {
        if (document.getElementById("rmenu").classList == "opened") {

            document.getElementById("rmenu").classList.remove("opened");
            document.getElementById("rmenu").style.display = "none";
        }
    }  
}

// ???
document.getElementById('rmenu').addEventListener("click", function() {
    function whatToDo (e) {
        if (e.target.id == 'start') {
            console.log("start clicked")
        } else if (e.target.id == 'goal') {
            console.log("goal clicked")
        }
    }
});

How to add onclick event for dynamically created popup menu?

I was surfing the internet and then created addEventListener like this author recommends, but nothing changed. What I've done wrong?

I marked my problem function with comment (???)

do you want to create as many popups as the user right clicks on the screen ? — iliasse
– iliasse, Commented Mar 11, 2020 at 15:50

iliasse · Accepted Answer · 2020-03-12 11:32:13Z

you have used document.onmousedown in order to hide the right click menu first the event is applied to the whole document that means wherever you click the popup will turn invisible second it will take the right click, left click and the mouse scroll button as events trigger and not only right click

function mouseX(evt) {
    if (evt.pageX) {
        return evt.pageX;
    } else if (evt.clientX) {
        return evt.clientX + (document.documentElement.scrollLeft ?
    document.documentElement.scrollLeft :
    document.body.scrollLeft);
    } else {
        return null;
    }
}

function mouseY(evt) {
    if (evt.pageY) {
        return evt.pageY;
    } else if (evt.clientY) {
        return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    } else {
        return null;
    }
}

window.oncontextmenu = function openRightClickMenu (e) {
    e.preventDefault();
    document.getElementById("rmenu").style.display = "block";
    document.getElementById("rmenu").style.top = mouseY(e) + 'px';
    document.getElementById("rmenu").style.left = mouseX(e) + 'px';
    document.getElementById("rmenu").classList.add("opened");

    window.event.returnValue = false;
}

// remove mouse rightclick menu

/*document.getElementById('rmenu').addEventListener("dblclick",function(e){
	document.getElementById('rmenu').style.display = "none";
});
*/

document.documentElement.addEventListener("click", function(e) {
	document.getElementById('rmenu').style.display = "none";
});

// ???
document.getElementById('rmenu').addEventListener("click", function(e) {
e.stopPropagation();
    function whatToDo (e) {
        if (e.target.id == 'start') {
            console.log("start clicked")
        } else if (e.target.id == 'goal') {
            console.log("goal clicked")
        }
    }
});

document.getElementById('start').addEventListener("click", function(e) {
e.stopPropagation();
	console.log("start clicked");
});

document.getElementById('goal').addEventListener("click", function(e) {
e.stopPropagation();
	console.log("goal clicked");
});

.rmenu_options {
    margin-bottom: 7px;
    cursor: pointer;
    }
#rmenu {
    display: none;
    position: absolute;
    background: bisque;
    width: 175px;
    height: 55px;
    padding: 10px;
    border-radius: 6px;
    font-size: 18px;
}

<html>
<div id="rmenu">
   <div class="rmenu_options">
        <a href="#" id="start" >Create starting point</a>
   </div>
   <div class="rmenu_options">
       <a href="#" id="goal">Create goal point</a>
   </div>
</div>
</html>

I have updated your code :

use right click to create the popup

use a single click anywhere in the document to hide it

use a single click on the links to display a message in the console

Is it possible somehow to change the code to hide popup by leftclicking somewhere but not on the popup, not doubleclicking on it?
Sorry buddy for the delay, you have the answer updated with the new behaviour !

Collectives™ on Stack Overflow

js create onclick event for dynamically appeared menu

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related