您如何使用javascript檢測光標是否直接位於文本上方？

Question

當光標僅直接位於某些文本上方時，我想更改元素。 例如 ：

Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 在此文本上而不是后面的空白處觸發事件。

我不想在光標位於 div 或段落以及空白空間上方時觸發此更改，例如本段末尾的空格。 問題是元素以矩形形式形成並且包括這個空白空間。

我不知道這是否可能，我真的不知道什么時候開始。

Answer 1

確保包裹文本的元素設置為display: inline; 然后像這樣監聽mouseover事件：

let element = document.querySelector('.selector');
element.addEventListener('mouseover', () => {
   // your code here.
});

Answer 2

如以下鏈接所述：

注意：內聯元素不會從新行開始，只占用必要的寬度。

將文本封裝在一個內聯元素（如span ）中，該元素不會像塊級元素那樣一直延伸到整個頁面，並在span上使用mouseover事件處理程序。

 document.querySelector("span").addEventListener("mouseover", function(){ console.log("You are over the text of the span"); });

 <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Trigger the event when on this text but not the blank space after. </span> </div>

而且，如果您需要一個僅使用 JavaScript 的解決方案，我們可以更改div的display屬性，使其作為內聯元素流動：

 const div = document.querySelector("div"); div.style.display = "inline"; // Make the div act like a span div.addEventListener("mouseover", function(){ console.log("You are over the text of the div that is acting as an inline element"); });

 <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Trigger the event when on this text but not the blank space after. </div>