1

我正在组合一个工具，它允许人们使用 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);
});

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

我对这个问题的理解是，我需要将消息相对于用户单击的最近元素定位。问题是。我该怎么做？

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

2011 年 4 月 7 日更新

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

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

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

4

4 回答 4

2

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

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

    $('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);
    });
于 2011-07-03T22:34:22.317 回答
0

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

于 2011-07-03T22:31:41.270 回答
0

这应该显示如何跟踪鼠标移动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>');
});
于 2011-07-03T22:26:51.640 回答
0

我建议在您的页面上放置一个div，具有固定的宽度和高度。然后将您的dblclick功能应用于那个div而不是body.

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

于 2011-07-03T22:27:44.513 回答