我有以下代码负责显示工具提示。我对这段代码不满意有两个原因:
- 我使用 pageXOffset 和 pageYOffset“魔数(Magic Number)”来纠正每个浏览器的视觉状态。
- 对话窗口必须保持静止,数字才正确。
我已经尝试绑定(bind)到对话框窗口的 mousemove 事件而不是文档。结果与我当前绑定(bind)到文档的 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');
}
}
最佳答案
要获取鼠标相对于特定 div(而不是视口(viewport))的位置,您需要 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);
});
根据您的示例,这应该可行。不过,您可能需要查看您的 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'
});
}
}
关于javascript - 获取相对于 jQuery 对话框窗口而不是视口(viewport)的鼠标坐标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9996309/