Javascript 显示左下角而不是鼠标位置的弹出窗口

因此，我有一段代码，它过去可以很好地处理普通事件侦听器，但我只是将触发器更改为html onclick（），现在我的弹出窗口总是显示在左下角；我不明白为什么这是不同的：

HTML:

JS:

CSS

---

你需要事件，坐标是MouseEvent的一部分，你不能通过（这个）获得它们，但是你可以通过（事件）传递事件对象。

希望，昨天我在搜索如何捕捉鼠标位置并找到了这块金子

function managePosition(event){
  var dot, eventDoc, doc, body, pageX, pageY;

  event = event || window.event;

  if (event.pageX == null && event.clientX != null) {
    eventDoc = (event.target && event.target.ownerDocument) || document;
    doc = eventDoc.documentElement;
    body = eventDoc.body;

    event.pageX = event.clientX +
                 (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
                 (doc && doc.clientLeft || body && body.clientLeft || 0);
    event.pageY = event.clientY +
                 (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
                 (doc && doc.clientTop  || body && body.clientTop  || 0 );
  }

  //here you can use event.pageX to set your element.style.left and
  //event.pageY to your top. For example: (g = documentGetElementById(id))
  g('bubble').style.left = (event.pageX + 30) + "px";
  g('bubble').style.top = (event.pageY - 200) + "px"
}

---

这个

onclick=“edit（This）”

是各种无效的。你是什么意思？它触发罚款，我得到的目标罚款之前；只有屏幕位置似乎没有正确更新单击事件的位置是否为绝对位置？弹出窗口可能绑定到文档正文或文档中的其他相关元素。其标记无效。它可以工作，因为浏览器会帮你更正它。@theGrizz我已经用CSS更新了这个问题；只有固定位置显示时，我一直在尝试你的答案，但还没有成功；我试图将

span

更改为

div

和

body.clientX

。这就是你的意思吗？我还尝试了从您的链接中使用

MouseEvent.screenX

，

span onclick=“edit（event）”

，对不起，我真的以为您每次点击页面时都希望鼠标光标附近出现一个弹出窗口。太棒了！！！非常感谢你！我也需要这个属性，所以我最终使用了两个

onclick=“edit（this，event）”

，它工作得很好是的，很抱歉，最初误解了用例。

 #popup{
  width: auto;
  height: auto;
  background-color: white;
  z-index: 500;
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  border: 1px black solid;
 }

function managePosition(event){
  var dot, eventDoc, doc, body, pageX, pageY;

  event = event || window.event;

  if (event.pageX == null && event.clientX != null) {
    eventDoc = (event.target && event.target.ownerDocument) || document;
    doc = eventDoc.documentElement;
    body = eventDoc.body;

    event.pageX = event.clientX +
                 (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
                 (doc && doc.clientLeft || body && body.clientLeft || 0);
    event.pageY = event.clientY +
                 (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
                 (doc && doc.clientTop  || body && body.clientTop  || 0 );
  }

  //here you can use event.pageX to set your element.style.left and
  //event.pageY to your top. For example: (g = documentGetElementById(id))
  g('bubble').style.left = (event.pageX + 30) + "px";
  g('bubble').style.top = (event.pageY - 200) + "px"
}