确定鼠标点击位置的位置

Question

我在一个工具中允许人们使用jQuery双击并在HTML页面的任何位置留下消息。它已经成为消息定位的绊脚石。

的代码，我此刻的测试：

$('body').bind('dblclick', function(e) { 

    var message = $('<div class="message">Form here</div>').css({ 
     'left' : e.pageX, 
     'top' : e.pageY 
    }); 

    $(this).append(message); 
}); 

这将创建在鼠标点击的位置，一个新的“消息”。虽然这在一定程度上起作用，但只要浏览器窗口重新调整大小，“消息”就会移出位置。由于我最终希望保存这些消息（并检索它们），因此将它们加载到每个浏览器上的每个用户的不同位置并不理想。即使该页面使用媒体查询，我也希望邮件附加到页面布局。

我对这个问题的理解是，我需要定位相对于用户点击的最近元素的消息。问题是。我如何？

任何提示或提示将不胜感激。

更新04/07/11

大多数的答案下面我有过的是不是真的，我追求的。我已经上传了example of my page to JSfiddle向您展示我的设置。这里的问题是使消息附加在相对位置，这样当浏览器窗口重新调整大小时，消息随着内容一起移动。

例如。如果我在页面的第二段添加消息，不管浏览器/设备宽度如何，我都会将该消息粘贴到该段落。据我可以告诉我需要建立最近的块级元素（或具有ID或类的元素），可以用来定位消息相对于。

希望清除问题&感谢您的所有建议。

Answer 1

这应该说明了如何追踪鼠标移动http://docs.jquery.com/Tutorials:Mouse_Position#How_do_I_find_the_mouse_position.3F

jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     $('#status').html(e.pageX +', '+ e.pageY); 
    }); 
}) 

与此相伴，你可以使用resize()改变DIV

$(window).resize(function() { 
    $('body').prepend('<div>' + $(window).width() + '</div>'); 
}); 

Answer 2

的位置，我建议把你的页面上的单个div，具有固定的宽度和高度。然后运用你的dblclick功能于div而不是body。

您可能还需要动态div元素绝对定位，所以它们出现在正确的位置。这是一个example fiddle。

Answer 3

您需要定位信息的div：

$('body').bind('dblclick', function(e) { 

    var message = $('<div class="message">Form here</div>').css({ 
     'left' : e.pageX, 
     'top' : e.pageY, 
     'position' : 'fixed', 
     'zIndex': 999999 
    }); 

    $(this).append(message); 
}); 

http://jsfiddle.net/PvFTN/

Answer 4

据我所知，有可能几个问题：第一，我可以看到的是，你需要确保“body”元素覆盖整个页面，因为它只会在其框允许的范围内延伸。 （我通常意识到，简单地设置div的背景通常可以让你看到它的范围，但body tag是一个特殊情况。其背景延伸到浏览器的整个可见区域，但它的框可能不）

其次，重要的是将css“position”属性设置为“absolute”或绝对定位不起作用：此代码有效：

$('body').bind('dblclick', function(e){ 

     var message = $('<div class="message">Form here</div>').css({ 
      'position' : 'absolute', 
      'left' : e.pageX, 
      'top' : e.pageY 
     }); 

     $(this).append(message); 
    });