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

Question

当我将鼠标悬停在显示的图像坐标上时，我想将这些坐标附加到 div 中是否可能

这是我到目前为止的一些 fiddle 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

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

$('.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 + ')');
});

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

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