Offset и mouseevent pageX и Y добавляют пиксель

Question

Может быть, проблема в другом, но я просто не могу найти проблему.

Так что мне нужен div, чтобы показывать, когда клиент нажимает ссылку, и он должен появиться в этом месте.

Я использовал. css ({top: e.pageY, left: e.pageX}), но div-ы всегда были вне экрана. Тогда я попробовал смещение и получил ту же проблему. Теперь, когда я перемещаю ссылку на 0 0 и щелкаю по ней, div находится наверху 1456,5 пикселей и слева 262 пикселей. Когда я установил верхнюю часть ссылки на 200 пикселей, div будет сверху 1456,5 пикселей и слева 62 пикселей. Я также попытался вычесть смещение контейнера. Все тот же результат. Разница в 0 0, div находится наверху 1055 пикселей и слева 0 пикселей. И наверху 0 справа 10 пикселей div находится наверху 1045 пикселей и слева 0 пикселей.

Тем не менее, по какой-то причине 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;
}

/img/couch-1835923_1920.jpg">

Answer 1

• 1000 *

Итак, решение, которое сработало для меня:

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

Я дал контейнеру идентификатор, чтобы мы не получали смещение других контейнеров.

Спасибо всем за вашу помощь

Answer 2

Все, что вам нужно, это использовать координаты мыши из события щелчка мыши: 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;
}

/img/couch-1835923_1920.jpg">