获取鼠标坐标相对于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' 
     }); 
    } 
}