Set mouse position for context menu

Question

I created a context menu which successfully appear on right click. The only downside is that this context menu only appear in the top left corner. I do not get the menu at the current mouse position. I found several code snippets which I could´n append to my code. I guess there must be a simple 1-2 liner to track and set the mouseX and mouseY position. Any suggestion will help.

function contextMenu() {
    d3.event.preventDefault()
    
    var contextMenu = document.getElementById("context-menu")
        //contextMenu.style.top = ?
        //contextMenu.style.left = ?
        contextMenu.classList.add("active")

    window.addEventListener("click", function () {
        contextMenu.classList.remove("active")
    })

    document.getElementById("addObject").addEventListener("click", addNodeClicked)
}

function addNodeClicked() {
    console.log("addNodeclicked")
}

blaumeise20 blaumeise20 · Accepted Answer · 2021-02-19T12:38:00

You will need the event:

function contextMenu(event) {

Add the following two lines instead of the comment:

contextMenu.style.top = event.clientY + "px";
contextMenu.style.left = event.clientX + "px";

Set mouse position for context menu

1 Answers