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);

这是小提琴：

https://jsfiddle.net/0rL9neeL/

编辑：对不起，似乎我还没有解释一个问题：是的，这是正确的点击。那个div应该出现的地方。

Answer 1

您可以使用ev.clientX，ev.clientY获取坐标（以CSS像素的形式返回相对于视口的坐标），然后使用javascript设置样式。你可以这样做：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

您正在将样式设置为属性，而实际上您应将其设置在样式对象

上

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

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

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

Answer 3

您试图设置元素本身的left，top，position和display属性，而不是style属性（返回元素的一个对象）。此外，您需要将测量单位（在这种情况下为像素）附加到left和top属性的值。

window.addEventListener('contextmenu', function(ev) {
  ev.preventDefault();
  
  // Just get a reference to the DOM element once:
  var pal = document.getElementById('palette');
  
  // Every DOM element has a style property, which exposes
  // a style object that, itself, exposes the various CSS
  // properties. Also, remember, CSS requires units of measurement
  pal.style.display = 'block';
  pal.style.position = 'absolute';
  pal.style.left = ev.pageX + "px";
  pal.style.top = ev.pageY + "px";

  // No need to return false here, that wasn't doing anything for you
  
});

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

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

Answer 4

右键单击窗口将在左上角显示红色方块。您已为上下文菜单添加了事件侦听器，这是右键单击。

我建议您尝试ev.clientX和ev.clientY来获取鼠标坐标。

https://jsfiddle.net/0rL9neeL/3/

为什么div不会出现在我右键单击的位置？

4 个答案: