Question

我想知道如何定位html片段以显示在光标所在的位置，特别是在点击时。到目前为止，我有一个div，它将自己定位在点击光标旁边。

 shape.on('click', function(event){ 
   if (event.which == 1) {
          $("#message").css({
                top: event.pageY + 5,
                left: event.pageX + 5
            }).show();
   }
});

而是我所追求的是不要“显示”任何现有的div，而是“动态”插入光标所在的新代码。

谢谢

Answer 1

使用.html()将文本插入光标旁边的div中。

示例：$("#message").html("html text that you want");

如果您想继续向邮件添加文字，请使用.append()，否则.html()每次都会覆盖#message的内容。

Answer 2

您只需在该div上附加（append）或插入（html）您想要的代码：

$('#message').html('Hello world!');

完整代码：

 shape.on('click', function(event){ 
   if (event.which == 1) {
          $("#message").css({
                top: event.pageY + 5,
                left: event.pageX + 5
            }).show();

          $('#message').html('Hello world!');
   }
});

生活演示：http://jsfiddle.net/zEsF5/3/

Answer 3

如果您这样做，可以轻松添加新元素：

shape.on('click', function(event){ 
  if (event.which == 1) {
    $("<div>The <strong><em>HTML</em> code</strong> you want<br/>can go here<div>").css({
           top: event.pageY + 5,
           left: event.pageX + 5,
           position: 'absolute'
    }).appendTo(shape).show();
  }
});

有一个有效的JS Fiddle

将HTML放在光标旁边

3 个答案: