Question

所以我有这个代码，以前用普通的事件监听器工作正常，但我只是改为html onclick（）为触发器，现在我的弹出窗口始终显示在左下角;我不明白为什么会有所不同：

HTML：

<span onclick="edit(this)"></span>

JS：

function edit(target){
  var left = (target.clientX - 40) + "px";
  var top = (target.clientY - 40)+ "px";
  $("#popup").css('left',left);
  $("#popup").css('top',top);
  $("#popup").css('position','fixed');
  $("#popup").fadeIn(500);
}

CSS

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

Answer 1

你需要事件，坐标是MouseEvent的一部分，你无法通过（this）获取它们，但你可以通过（事件）传递事件对象。

Answer 2

希望昨天我正在寻找如何抓住鼠标位置并找到这块金子

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"
}

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

2 个答案: