獲取鼠標座標相對於jQuery對話窗口而不是視口？

Question

我有以下代碼負責顯示工具提示。我對此代碼感到不滿意的原因有兩個：

• 我使用pageXOffset和pageYOffset'magic numbers'來更正每個瀏覽器的可視狀態。
• 對話窗口必須保持靜止，以使數字正確。

我已經嘗試綁定到對話框窗口的mousemove事件而不是文檔。結果與我當前的實現相同，它綁定到文檔的mousemove。

var shouldDisplay = false; 
$(document).mousemove(AdjustToolTipPosition); 

function DisplayTooltip(tooltip_text) { 
    shouldDisplay = (tooltip_text != "") ? true : false; 
    if (shouldDisplay) { 
     $('#CustomTooltip').html(tooltip_text); 
     $('#CustomTooltip').show(); 
    } 
    else { 
     //Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in. 
     $('#CustomTooltip').hide(); 
    } 
} 

function AdjustToolTipPosition(e) { 
    if (shouldDisplay) { 
     //msie e.page event should be standardizes, but seems to go awry when working inside of a modal window. 
     var pageYOffset = $.browser.msie ? 260 : 572; //-314 
     var pageXOffset = $.browser.msie ? 474 : 160; //+314 

     $('#CustomTooltip').css('top', e.pageY - pageYOffset + 'px'); 
     var offsetLeft = e.pageX - pageXOffset; 
     var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - offsetLeft < 0; 

     //Prevent the tooltip from going off the screen by changing the offset when it would go off screen. 
     if (isOutsideViewport) { 
      offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width(); 
     } 

     $('#CustomTooltip').css('left', offsetLeft + 'px'); 
    } 
} 

// Initialize the Historical Chart dialog.   
$('#HistoricalChartDialog').dialog({ 
    autoOpen: false, 
    buttons: { 
     'Close': function() { 
      $(this).dialog('close'); 
     } 
    }, 
    hide: 'fold', 
    modal: true, 
    draggable: false, 
    resizable: false, 
    position: 'center', 
    title: 'Historical Charts', 
    width: 700, 
    height: 475 
}); 

我只是爲了提供jQuery對話框初始值設定項。工具提示僅顯示在此對話窗口內 - 但座標是整個頁面的。是否可以檢索相對於對話窗口的座標，以便我可以利用jQuery的mousemove將pageX和pageY屬性的座標標準化的事實？

編輯解決方案：

//Seperate file because the offsets are different for the image under MVC. 
var shouldDisplay = false; 
$("#HistoricalChartDialog").mousemove(AdjustToolTipPosition); 

function DisplayTooltip(tooltip_text) { 
    shouldDisplay = (tooltip_text != "") ? true : false; 
    if (shouldDisplay) { 
     $('#CustomTooltip').html(tooltip_text); 
     $('#CustomTooltip').show(); 
    } 
    else { 
     //Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in. 
     $('#CustomTooltip').hide(); 
    } 
} 

function AdjustToolTipPosition(e) { 
    if (shouldDisplay) { 
     var xPos = e.pageX - $(this).closest('.ui-dialog').offset().left + 15; 
     var widthDifference = $(this).width() - $("#CustomTooltip").width(); 
     //Prevent the tooltip from going off the screen by changing the offset when it would go off screen. 
     xPos = (widthDifference - xPos < 0) ? widthDifference : xPos; 
     $('#CustomTooltip').css('left', xPos + 'px'); 

     var yPos = e.pageY - $(this).closest('.ui-dialog').offset().top - 10; 
     $('#CustomTooltip').css('top', yPos + 'px'); 
    } 
} 

Answer 1

要獲得鼠標相對的位置，以一個特定的DIV，而不是視口，你把eventX/Y和減去div的左/頂部位置：

$("#example").mousemove(function(e) { 
    var xPos = e.pageX - $(this).position().left; 
    var yPos = e.pageY - $(this).position().top; 
    $("#pos").text("x: " + xPos + "/y: " + yPos); 
}); 

Example fiddle

鑑於你的榜樣，這應該工作。雖然你可能需要看看你的isOutsideViewport邏輯。

function AdjustToolTipPosition(e) { 
    if (shouldDisplay) { 
     var xPos = e.pageX - $(this).position().left; 
     var yPos = e.pageY - $(this).position().top; 

     var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - xPos < 0; 
     if (isOutsideViewport) { 
      offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width(); 
     } 

     $('#CustomTooltip').css({ 
      'top': yPos + 'px', 
      'left': xPos + 'px' 
     }); 
    } 
}