Question

我想将一个元素$menu放在鼠标指针上（点击时）。 $menu位于$icon内position: relative。（$menu有绝对位置。）

＆＃13;

$(document).ready(function() {
  $("a").click(function(ev) {
    var $icon = $(ev.currentTarget)
    var $menu = $icon.next()
    var thisPos = $icon.position()
    var x = ev.clientX
    var y = ev.clientY
    $menu.css('top', y + 'px')
    $menu.css('left', x + 'px')
  });
})

＆＃13;

nav > ul[_v-2e9e2f12] {
  background: #3a3c3a;
  margin: 0;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 9999;
  box-shadow: 2px 0 1px rgba(0, 0, 0, 0.1);
}

nav > ul li[_v-2e9e2f12] {
  display: block;
  margin: 0 0 8px;
  text-align: center;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  width: 48px;
  height: 48px;
  background: #ccc;
}

ul[_v-0078ee36] {
  background: #3a3c3a;
  position: absolute;
  border-radius: 3px;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
}

a[_v-2e9e2f12] {
  display: block;
  width: 48px;
  height: 48px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul _v-2e9e2f12="">
    <li _v-2e9e2f12="">
      <a _v-2e9e2f12="">
      </a>
      <ul _v-0078ee36="" _v-2e9e2f12="">
        Hello!
      </ul>
    </li>
    <li _v-2e9e2f12="">
      <a _v-2e9e2f12="">
      </a>
      <ul _v-0078ee36="" _v-2e9e2f12="">
        Hello!
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

但是我得到了一个奇怪的行为：$menu没有放在鼠标的指针上，而是放在右边和底部的几个像素上。对于第二个元素，情况更糟：右边和底部有很多像素。

如何解决此问题，并使$menu位于鼠标指针的正确位置？

这里是JSFiddle。

Answer 1

使用offsetX和offsetY代替client＆＃39>

var x = ev.offsetX;
var y = ev.offsetY;

如何在相对定位的元素内获取鼠标的坐标？

1 个答案:

DEMO