Javascript 确定鼠标单击位置的位置

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

$（'body'）.bind（'dblclick'，function（e）{
var message=$（'formhere'）.css({
“左”：e.pageX，
“顶部”：e.pageY
});
$（此）.append（消息）；
});

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

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

如有任何提示或提示，将不胜感激

2011年7月4日更新

下面我得到的大多数答案都不是我真正想要的。我已上载一个以向您显示我的设置。这里的问题是使消息附加在相对位置，以便在重新调整浏览器窗口的大小时，消息随内容移动

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

---

希望这能澄清问题&谢谢你的建议。

这应该说明如何跟踪鼠标移动

除此之外，您还可以使用

resize（）

更改div的位置

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

$（窗口）。调整大小（函数（）{
$（'body'）.prepend（''+$（window.width（）+''）；
});

我建议在页面上放置一个固定宽度和高度的

div

。然后将

dblclick

函数应用于该

div

而不是

主体

---

您可能还希望绝对定位动态

div

元素，以便它们显示在正确的位置。这是一个。

您需要定位消息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);
});

$（'body'）.bind（'dblclick'，function（e）{
var message=$（'formhere'）.css({
“左”：e.pageX，
“顶部”：e.pageY，
'位置'：'固定'，
“zIndex”：999999
});
$（此）.append（消息）；
});

---

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

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

$（'body'）.bind（'dblclick'，function（e）{
var message=$（'formhere'）.css({
'位置'：'绝对'，
“左”：e.pageX，
“顶部”：e.pageY
});
$（此）.append（消息）；
});

你好，汤姆。谢谢你的回答。我忘了提到这些消息已经使用CSS进行了绝对定位。问题在于，使用绝对位置的项目重新调整浏览器窗口的大小会导致内容移动，消息保持在固定位置。我试图确保消息始终与页面内容保持在上下文中。在我看来，实现这一点的唯一方法是与刚刚点击的内容相对应的位置。这才是真正的问题。我假设你有一种中央div，它有一个宽度，然后它的“左边距”和“右边距”属性设置为自动，以允许它保持中央。这意味着当窗口水平调整大小时，绝对定位的div“滑动”左穿过中心div？如果是这种情况，那么您应该附加到div，而不是body，是的，relative应该执行我认为的技巧，尽管它可能是相对于长方体所在的位置，而不是相对于父长方体的位置。我会查一下，然后再给你回电话的。我的代码已经在跟踪鼠标位置。问题有点复杂，嗨，AlienWebguy。不幸的是，位置固定并不能解决我的问题。内容仍然独立于消息移动-滚动打破了我正在寻找的行为。嗨，詹姆斯。由于我希望这在任何网页上都能起作用，我想我很难限制可以放置消息的画布。也许将身体包裹在一个宽度和高度都为100%的div中就可以了。。。你可能刚刚给了我一个想法，我可以尝试什么！忽略我的回答，我那该死的屁股没有正确地阅读这个问题。您要做的是将cross元素插入HTML页面最上面的元素中。与从浏览器计算X和Y不同，您可以从最上面的元素计算X和Y，这意味着长方体将继续调整大小。

    $('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);
    });