偏移量和鼠标事件 pageX 和 Y 正在添加像素

Question

也许问题出在其他地方，但我就是找不到问题。

所以我需要一个 div 来显示客户点击链接的时间，并且它需要显示在那个位置。

我使用了 .css({top: e.pageY, left: e.pageX}) 但 div 总是不在屏幕上。所以然后我尝试了偏移并遇到了同样的问题。现在，当我将链接的位置移动到 0 0 并单击它时，div 位于顶部 1456.5px 和左侧 262px 处。当我将链接的顶部设置为 200 像素时，div 将位于顶部 1456.5 像素，左侧为 62 像素。 我还尝试减去容器的偏移量。结果还是一样。不同之处在于 0 0 div 位于顶部 1055 像素和左侧 0 像素。 在顶部 0 右 10px 处，div 位于顶部 1045px 和左侧 0px。

所以，出于某种原因，top 响应 right 而 left 响应 top。

$('.pulslink').on('click', function(e) {

  e.preventDefault();

  var title = this.title;
  var content = $(this).data('content');
  var offset = $(this).offset();

  $(this).find('.exit').show();

  $('.popover').css({
    top: offset.left,
    left: offset.top
  });
  $('.popover').show();

  $('.popover-header h3').text(title);
  $('.popover-body').text(content);
});

.pulsar {
  background: blue;
  border-radius: 50%;
  margin: 10px;
  height: 25px;
  width: 25px;
  animation: pulse 2s infinite;
  text-align: center;
}

.exit {
  color: white;
  font-size: 25px;
  display: none;
}

.pulslink {
  z-index: 100;
}

.test {
  position: absolute;
  top: 300px;
  right: 250px;
}

.test2 {
  position: absolute;
  top: 250px;
  right: 900px;
}

.test3 {
  position: absolute;
  top: 450px;
  right: 600px;
}

.test4 {
  position: absolute;
  top: 450px;
  right: 1050px;
}

.test5 {
  position: absolute;
  top: 510px;
  right: 700px;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 17, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 17, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 17, 255, 0);
  }
}

.popover {
  height: 200px;
  width: 350px;
  background-color: white;
  top: 0;
  left: 0;
  display: none;
  position: absolute;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.popover-header {
  padding: 15px;
}

.popover-body {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>

  <div class='container'>

    <img src="<?php echo get_template_directory_uri(); ?>/img/couch-1835923_1920.jpg" class="img-info">

    <a href="" class="pulslink test" title="" data-content="">
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>
    <a href="" class="pulslink test2" title="" data-content="">
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>
    <a href="" class="pulslink test3" title="" data-content="">
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>
    <a href="" class="pulslink test4" title="" data-content='S'>
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>
    <a href="" class="pulslink test5" title="" data-content="">
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>

    <div class="popover">
      <div class="popover-header">
        <h3></h3>
      </div>
      <div class="popover-body"></div>
    </div>
  </div>





</section>

Answer 1

您只需要使用鼠标单击事件中的鼠标坐标：e.pageX 是水平位置，e.pageY 是垂直位置。

$('.pulslink').on('click', function(e) {

  e.preventDefault();
  
  var title = this.title;
  var content = $(this).data('content');

  $(this).find('.exit').show();

  $('.popover').css({
    top: e.pageY + 'px',
    left: e.pageX + 'px'
  });
  $('.popover').show();

  $('.popover-header h3').text(title);
  $('.popover-body').text(content);
});

.pulsar {
  background: blue;
  border-radius: 50%;
  margin: 10px;
  height: 25px;
  width: 25px;
  animation: pulse 2s infinite;
  text-align: center;
}

.exit {
  color: white;
  font-size: 25px;
  display: none;
}

.pulslink {
  z-index: 100;
}

.test {
  position: absolute;
  top: 300px;
  right: 250px;
}

.test2 {
  position: absolute;
  top: 250px;
  right: 900px;
}

.test3 {
  position: absolute;
  top: 450px;
  right: 600px;
}

.test4 {
  position: absolute;
  top: 450px;
  right: 1050px;
}

.test5 {
  position: absolute;
  top: 510px;
  right: 700px;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 17, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 17, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 17, 255, 0);
  }
}

.popover {
  height: 200px;
  width: 350px;
  background-color: white;
  top: 0;
  left: 0;
  display: none;
  position: absolute;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.popover-header {
  padding: 15px;
}

.popover-body {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>

  <div class='container'>

    <img src="<?php echo get_template_directory_uri(); ?>/img/couch-1835923_1920.jpg" class="img-info">

    <a href="" class="pulslink test" title="" data-content="">
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>
    <a href="" class="pulslink test2" title="" data-content="">
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>
    <a href="" class="pulslink test3" title="" data-content="">
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>
    <a href="" class="pulslink test4" title="" data-content='S'>
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>
    <a href="" class="pulslink test5" title="" data-content="">
      <div class="pulsar"><span class="exit">&times;</span></div>
    </a>

    <div class="popover">
      <div class="popover-header">
        <h3></h3>
      </div>
      <div class="popover-body"></div>
    </div>
  </div>

</section>

Answer 2

对于任何可能遇到类似情况的人来说，当您减去父元素的偏移量时，它实际上可以很好地使用偏移量。

我在计算，左右切换时确实犯了错误。

所以对我有用的解决方案是

 var left = offset.left - $('#info-container').offset().left;
        var top = offset.top - $('#info-container').offset().top;

        $(this).find('.exit').show();
    
        $('.popover').css({top: top, left: left});

我给容器一个ID，所以我们不会得到其他容器的偏移量。

感谢大家的帮助