javascript - 为什么 div 没有出现在我右键单击的位置？

Question

你能告诉我为什么 div 没有出现在我点击的地方吗？它仅出现在左上角。

CSS:

#palette {
    display: none;
    width: 20px;
    height: 20px;
    background-color: red;
}

HTML:

<div id="palette"></div>

Javascript:

window.addEventListener('contextmenu', function(ev) {
  ev.preventDefault();
  document.getElementById('palette').setAttribute('left', ev.pageX);
  document.getElementById('palette').setAttribute('top', ev.pageY);
  document.getElementById('palette').setAttribute('position', 'absolute');
  document.getElementById('palette').style.display = 'block';
  return false;
}, false);

这是 fiddle :

https://jsfiddle.net/0rL9neeL/

编辑:抱歉，好像我还没有解释一个问题:是的，这是右键单击。这就是 div 应该出现的地方。

Answer 1

您可以使用 ev.clientX、ev.clientY 获取坐标(以 CSS 像素为单位返回相对于视口(viewport)的坐标)，然后只需设置使用 javascript 的样式。你可以这样做:

var element = document.getElementById('palette');

window.addEventListener('contextmenu', function(ev) {
  ev.preventDefault();
  var x = ev.clientX;
  var y = ev.clientY;
  element.style.display = 'block';
  element.style.left = x + "px";
  element.style.top = y + "px";

  return false;
}, false);

#palette {
  display: none;
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
}

<div id="palette"></div>

您的代码存在的问题是您使用的是 setAttribute，它将属性设置为 DOM 元素，而不是内联 CSS。