Question

当我将鼠标悬停在图像坐标上时，我想在div中追加那些坐标是否可能

这是我到目前为止的一个小提琴 Fiddle

的jquery.js

  $('.hover').mousemove(function(e){

        var hovertext = $('.hover').attr('hovertext');
        $('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
        $('#hoverdiv').css('top',e.clientY).css('left',e.clientX);

    }).$('#img').on('click', function () {
    $('(' + e.clientX + ',' + e.clientY + ')').appendTo('#append');
  }) .mouseout(function(){
        $('#hoverdiv').hide();
    });

的index.html

<div id="hoverdiv"></div>
<img id="img" class="hover" src="Coordinates.svg.png"  hovertext="" />

<div id="append">
</div>

Answer 1

我刚刚更新了您的代码，我希望它能满足您的要求。

＆＃13;

$('.hover').mousemove(function(e) {

  var hovertext = $('.hover').attr('hovertext');
  $('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
  $('#hoverdiv').css('top', e.clientY).css('left', e.clientX);

}).mouseout(function() {
  $('#hoverdiv').hide();
});

$('#img').click(function(e) {
  $('#append').append('(' + e.clientX + ',' + e.clientY + ')');
});

＆＃13;

#hoverdiv {
  display: none;
  position: absolute;
  font-size: 14px;
  background-color: #fff;
  color: #404040;
  padding: 7px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />

<div id="append">
</div>

＆＃13;

Answer 2

我已更新代码以捕获hover和click上的坐标。

要在悬停时将文字附加到div，请将$('#append').append('(' + e.clientX + ',' + e.clientY + ')');添加到mousemove事件中。

注意：我在hoverDiv添加了10px的偏移量，使其远离光标。

Updated Fiddle

＆＃13;

$(function() {
  $('.hover').mousemove(function(e) {
    var hovertext = $('.hover').attr('hovertext');
    $('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
    $('#hoverdiv').css('top', e.clientY).css('left', e.clientX + 10);
    $('#appendHover').append('(' + e.clientX + ',' + e.clientY + ')');
  }).mouseout(function() {
    $('#hoverdiv').hide();
  });
  $('.hover').click(function(e) {
    $('#appendClick').append('(' + e.clientX + ',' + e.clientY + ')');
  });
});

＆＃13;

#hoverdiv {
  display: none;
  position: absolute;
  font-size: 14px;
  background-color: #fff;
  color: #404040;
  padding: 7px;
}
#appendClick {
  background-color: cornflowerblue;
}
#appendHover {
  background-color: coral;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hoverdiv"></div>
<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />

<div id="appendClick">
</div>
<div id="appendHover">
</div>

＆＃13;

Answer 3

尝试这样的点击事件，看看是否有帮助：

$('#img').click(function(e) {
    var offset = $(this).offset();
    alert(e.pageX - offset.left);
    alert(e.pageY - offset.top);
  });

如果没问题，你可以将它附加到div。

Answer 4

问题是click事件不会调用，因为鼠标将不断超过#hoverdiv。因此，您需要在其中添加点击事件：

$('#hoverdiv').on('click', function (e) {
    $( '<span>(' + e.clientX + ',' + e.clientY + ')</span>' ).appendTo( "#append" );
}).mouseout(function(){
    $('#hoverdiv').hide();
});

另请注意appendTo()函数需要html string作为参数。所以添加一些标签（例如<span>）。

Demo

Answer 5

代码中的错误很少。

点击事件与图片的绑定未正确完成。
显示的工具提示位于鼠标正下方，因此图像的点击事件未通过。请添加并向左或向右偏移，以便工具提示不会干扰图像上的点击。
我猜appendTo需要html而不是纯文本。

更正代码

 $('.hover').mousemove(function(e){
    var hovertext = $('.hover').attr('hovertext');
    $('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
    $('#hoverdiv').css('top',e.clientY).css('left',e.clientX + 10);
   }).on('click', function (e) {
      $('<p>(' + e.clientX + ',' + e.clientY + ')</p>').appendTo('#append');
   }) .mouseout(function(){
      $('#hoverdiv').hide();
  });

单击图像时将坐标附加到div上

5 个答案: