确定鼠标点击位置的位置

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

我在下面得到的大多数答案并不是我真正想要的。我已将我的页面示例上传到 JSfiddle 来向您展示我的设置。这里的问题是使消息附加在相对位置，以便在重新调整浏览器窗口大小时消息与内容一起移动。

例如。如果我将一条消息附加到页面上的第二段，如何让该消息与该段落保持一致，无论浏览器/设备宽度如何。据我所知，我需要建立最近的块级元素（或具有 ID 或类的元素），可用于相对定位消息。

希望能解决这个问题&感谢您的所有建议。

Answer 1

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

其次，它是将 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);
    });

Answer 2

这应该显示如何跟踪鼠标移动 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 3

我建议在页面上放置一个具有固定宽度和高度的 div。然后将 dblclick 函数应用于该 div 而不是 body。

您可能还想绝对定位动态 div 元素，以便它们出现在正确的位置。这是一个小提琴示例。

Answer 4

您需要定位消息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/