javascript - 将 HTML 定位在光标旁边

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

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

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

Answer 3

您只需在该 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/