Question

我想在我点击鼠标的地方放置一个动态创建的Html Span元素。我想使用从点击获得的坐标，但它没有工作。

HTML

 <div id = "test" style="background:#7FFFD4; width:1000px; margin:20px; height:20px; position: relative;">
  Area For Test
 </div>

脚本

 $(document).ready(function () {

    $("#test").click(function (e) {
         $('#test').append('<span id = "abc">' + 'sampleText' + '</span>');
         var x = Math.round(e.pageX - posX) + "px";
         var y = Math.round(e.pageY - posY)+ "px";
         $('#abc').css({ 'position': 'absolute', 'top': x, 'left': y});

   });

});

那么有没有一种方法可以在我点击的位置放置Span Element。

Answer 1

我稍微修改了你的代码片段。请在此处找到（https://jsfiddle.net/sdilipsam/7x47ejce/）。

您可以在What is the difference between screenX/Y, clientX/Y and pageX/Y?

中详细了解clientX / Y与Page X / Y.

<div id="test">Area For Test</div>

$(document).ready(function () {

$("#test").click(function (e) {
    $('.float-span').remove();
    $('body').append('<span id = "abc" class="float-span">' + 'sampleText' + '</span>');
    var x = Math.round(e.clientX) + "px";
    var y = Math.round(e.clientY) + "px";
    $('.float-span').css({
        'top': y,
        'left': x
    });

});

});

#test {
    background:#7FFFD4;
    width:500px;
    height:500px;
    margin:20px;
    position: relative;
}
.float-span {
   position:absolute;
}

Answer 2

将x和y交换为left和top，解决了大多数问题。您还可以在添加下一个范围之前删除添加的范围。

＆＃13;

 $(document).ready(function() {
   $("#test").click(function(e) {
     $('#abc').remove();
     $('body').append('<span id="abc">' + 'sampleText' + '</span>');
     var x = Math.round(e.pageX) + "px";
     var y = (Math.round(e.pageY) + 3) + "px";
     $('#abc').css({
       'position': 'absolute',
       'top': y,
       'left': x
     });
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" style="background:#7FFFD4; width:1000px; margin:20px; height:20px; position: relative;">
  Area For Test
</div>

＆＃13;

Answer 3

top对应于Y轴。在创建新的span之前，请先删除它。试试这个：在这里工作小提琴：http://jsfiddle.net/eu7xb4eL/

$(document).ready(function () {

    $("#test").click(function (e) {

        $('#abc').remove();

        var x = Math.round(e.pageX) + "px";
        var y = Math.round(e.pageY) + "px";

        $('<span id = "abc">' + 'sampleText' + '</span>').css({
            'position': 'absolute',
            'top': y,
            'left': x
        }).appendTo('#test');

    });

});

定位＆＃34; Span＆＃34;我点击鼠标的{Html元素

3 个答案: