检查鼠标指针周围哪一侧有更多 space

Question

我正在构建一个自定义工具提示功能，我应该在其中将视频显示为图像上的工具提示。现在，我有一些初步的工作，但我一直在寻找我应该显示工具提示的鼠标指针周围的区域。

我在鼠标光标的右下角始终可以看到工具提示，无论鼠标当前在屏幕上的哪个位置，这就是我目前所拥有的：

window.onmousemove = function (e) {
    var x = e.clientX, y = e.clientY;
    tooltipSpan.style.top = (y + 10) + 'px';
    tooltipSpan.style.left = (x + 10) + 'px';
};

其中工具提示是我的目标元素。我正在寻找的是，我的代码应该找到屏幕上鼠标周围可用的最大区域，并调整工具提示以显示在那里。对此的任何指示都会有很大帮助。

注意：jQuery 不是一个选项，我必须在核心 JS 中构建。

Answer 1

是这样的吗？ A switch 带有计算鼠标光标在哪个象限的条件。

var wM = window.innerWidth / 2;
var hM = window.innerHeight / 2;
document.addEventListener('mousemove', function(e) {
    var w = e.clientX;
    var h = e.clientY;
    var pos;
    switch (true) {
        case (w <= wM && h <= hM):
            pos = 'top-left';
            break;
        case (w <= wM && h >= hM):
            pos = 'bottom-left';
            break;
        case (w > wM && h < hM):
            pos = 'top-right';
            break;
        case (w > wM && h > hM):
            pos = 'bottom-right';
            break;
 default:
            pos = undefined;//Here you could even assign a default quadrant to relay on, in case any condition is met.
    }
    console.log(pos);
});

wM 为 widthMiddle，window 宽度的中间点。
hM: 相同，但有高度。
w为鼠标width/X位置； h 对于 height/Y.
根据象限系统根据条件进行切换。

Answer 2

您可以使用 window.innerWidth 和 window.innerHeight 获取视口的宽度和 尺寸（在我下面的示例中 this 指window因为代码是运行里面的window)

使用 ev.clientX/Y 使用视口尺寸和鼠标位置，您可以 确定 left/right 上的像素 space和光标的 top/bottom 侧，如下例所示。

使用属性 offsetWidth 和 offsetHeight 我们得到工具提示的尺寸我们可以用它来设置 工具提示相对于光标位置 的位置。例如，如果左上象限最大，工具提示将显示相对于光标的左上角（意味着工具提示的右下角将 "touch" 光标）。

希望这个例子对您有所帮助:)。

var tooltip = this.document.getElementsByClassName("tooltip")[0]; window.onmousemove = function(ev) { // Getting pixel space var leftPixelSpace = ev.clientX; var rightPixelSpace = this.innerWidth - leftPixelSpace; var topPixelSpace = ev.clientY; var bottomPixelSpace = this.innerHeight - topPixelSpace; // Determining the position of topleft corner of the tooltip var tooltipPosX = leftPixelSpace > rightPixelSpace ? leftPixelSpace - tooltip.offsetWidth : leftPixelSpace; var tooltipPosY = topPixelSpace > bottomPixelSpace ? topPixelSpace - tooltip.offsetHeight : topPixelSpace; // Setting tooltip position tooltip.style.left = tooltipPosX+"px"; tooltip.style.top = tooltipPosY+"px"; };

.tooltip { width: 150px; height: 100px; border: 1px solid black; background-color : lightblue; text-align: center; position: absolute }

<div class="tooltip">floating tooltip</div>

检查鼠标指针周围哪一侧有更多 space

Check which side has more space around mouse pointer

javascript

tooltip

mouseevent