Javascript 从要使用的单击中获取坐标

因此，我一直在尝试在用户右键单击页面上的任意位置时呈现一些div，而不是上下文菜单，为此，我需要接收单击的坐标。目前，我是这样做的

function printMousePos(event) {
  let coordinates = [event.clientX, event.clientY];
  //console.log(coordinates);
  return coordinates;
}

document.addEventListener("click", printMousePos);

在控制台中，我得到了一个带有x和y的数组，但是我不能在函数之外使用它们。我一直在尝试类似的东西

let a = function (event){...}

但它似乎在任何情况下都不会返回数组，那么我如何引用x和y呢？问题是这些都是动态的，只有在事件发生时才会改变。我是否应该在

printMousePos（事件）

? 或者有没有其他方法可以得到x和y

编辑

非常感谢你的回答，现在对我有用。我做了以下工作-在所有内容之外呈现菜单，使用CSS隐藏它，然后单击它将类更改为可见，并显示在单击的坐标中。有点像

在窗口中呈现菜单=>

rootNode.addEventListener('contextmenu', event => {
  event.preventDefault();
  //console.log('123');
  menu.classList.add('active');
  menu.style.top = `${event.clientY}px`;
  menu.style.left = `${event.clientX}px`;
});

---

点击就会显示出来。因此，无需获取外部坐标。

正如Teemu所说，“您无法从事件侦听器返回任何内容”。你不需要这么做

您可以在事件监听器外部声明坐标数组，并在触发事件后用数据填充它，或者（我更喜欢）编写应该使用坐标的函数，然后在事件监听器内部调用它（这与您自己建议的差不多）：

---

如何定位

？不能从事件侦听器返回任何内容，该值将返回到调用回调函数的事件队列。您可以在代码中看到，JS中没有任何内容可以接收返回值。改为使用外部范围变量，或者如您所说，“在[event handler]中呈现菜单”。非常感谢，现在对我很有用。我做了以下工作-在所有内容之外呈现菜单，使用CSS隐藏它，然后单击它将类更改为可见，并显示在单击的坐标中。有点像```

function handleClick(x,y) {
    // do stuff with x and y here, like drawing a div...
}

document.addEventListener("click", function(event) {
    handleClick(event.clientX, event.clientY);
});