確定鼠標點擊位置的位置

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); 
    });