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或类的元素），可用于相对于消息定位。

希望能够解决问题＆amp;谢谢你的所有建议。

Answer 1

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

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

    $('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元素，以便它们显示在正确的位置。这是一个example fiddle。

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/

确定鼠标单击位置的位置

4 个答案: