檢查哪一邊有更多的鼠標指針周圍空間

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

1. 你可以得到的寬度和使用window.innerWidth和window.innerHeight視的尺寸（以下this我的例子是指window因爲代碼裏面window運行）

2. 使用視維和鼠標位置使用ev.clientX/Y您可以在確定像素空間在光標的左側和右側以及頂部/底部，如下例所示。

3. 使用屬性offsetWidth和offsetHeight我們得到的工具提示的尺寸，我們可以用它來相對於光標位置的提示位置上。例如，如果topLeft象限最大，則工具提示將顯示相對於光標左上角（意味着工具提示的右下角將「觸摸」光標）。

我希望這個例子有助於:)。

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>

Answer 2

是這樣的嗎？ 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; 
 
\t 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，在窗口的寬度的中間點。
• hM：與高度相同。
• w爲鼠標寬度/ X位置;高度/ Y爲h。
• 根據象限系統的條件開關。