文本行之間是否存在特定的x-y座標？

Question

如果一個HTML頁面上的特定X-Y座標垂直位於兩行文本之間，那麼如何使用Javascript（jQuery將起作用）說明？這些行可能在長段落的中間，在一個冗長的行項目標籤內，跨度內，兩個標籤之間等等。我無法控制HTML或XY點，但我需要知道XY點位於一行文本的中間，或者位於兩行文本之間;它需要非常高效。

如果我還不夠清楚，請回答您可能有的任何問題。

非常感謝。

Answer 1

您可以在文本範圍內調用.getBoundingClientRect()。您需要爲IE和非IE瀏覽器編寫單獨的代碼以獲取文本範圍。

在IE中這應該是相對容易的，這要歸功於textRange.moveToPoint(x, y)。對於其他瀏覽器，您必須執行類似於DOM中元素的二進制搜索，在元素上調用.getBoundingClientRect()，直到找到包含文本的元素。然後創建一個包含該元素文本的範圍，並對範圍進行二分法搜索，以查找您的點是否與任何文本重疊。

如果你已經絕對定位了文本與其他元素重疊的元素，所有這些將會非常複雜。

Answer 2

處理過文本範圍後，我不認爲你可以在技術上在同一個HTML節點上放置兩行文本之間的任何內容。即使使用線條高度，每個像素也屬於其中一條線條（即使它們之間有視覺空間）。

我會拋出一些可能有用的選項。

最簡單的答案是可能只是使用線高度：（？event.relatedTarget jQuery中），這是點擊 獲取DOM元素 確定其偏移相對於頁面（即如該元素的頂部） 確定被點擊的點（x，鼠標事件Y的coords）使用 比較兩個使用line-height of text行中

這將是這個樣子：

function getLines(topOfElement, clickPoint, lineHeight) { 
    return Math.floor((clickPoint - topOfElement)/lineHeight); 
} 

var topOfElement = $(element).offset().top; //must be position: relative|absolute 
var clickedPoint = event.clientY; //might be pageY? 
var lineHeight = parseFloat($(element).css('line-height')); //probably need to set this in px using css or it might be null 
var textHeight = parseInt($(element).css('font-size')); //probably need to set this in px using css or it might be null 
var prevLineNumber = getLines(topOfElement, clickedPoint, lineHeight); 

// the previous line ends (in theory) at the bottom of the text (textHeight) 
// you might need to adjust this definition to your needs 
var prevLineBottom = prevLineNumber*lineHeight+topOfElement+textHeight; 

// the next line begins (in theory) at the top of its line 
// you might need to adjust this definition to your needs 
var nextLineTop = (prevLineNumber+1)+lineHeight; 

if(clickedPoint >= nextLineTop) { 
    alert('clicked on row '+(prevLineNumber+1)); 
} 
else if(clickedPoint <= prevLineBottom) { 
    alert('clicked on row '+prevLineNumber); 
} 
else { 
    alert('clicked between rows '+prevLineNumber+' and '+(prevLineNumber+1)); 
} 

如果你想看看點擊哈在兩個html節點之間，你可以用Rangy來做到這一點，以及一些奇特的選擇和範圍計算。

您可以將它用於確定選擇前後文本的確切長度等內容。這隻有在你想看到他們點擊的文本中的哪個位置時纔有用。

function getTextAtClick() { 
    var result = {nodeClicked: null, textBefore: '', textAfter: '', valid: false}; 

    //get a selection object (even though the selection is technically zero length) 
    var sel = rangy.getSelection(); 

    //you would probably want to discard any selection not zero length (i.e actual selection of text instead of a click) 
    // if not, you'd need to decide what it means to select across multiple dom nodes :(
    if(sel.toString().length > 0) { return result; } 

    // get the point where the click occurred 
    var range = sel.getRangeAt(0); 
    result.valid = true; 

    // determine text in our dom element up to the click point 
    var before = rangy.createRange(); 
    before.setStart(range.startContainer, 0); 
    before.setEnd(range.startContainer, range.startOffset); 
    result.textBefore = before.toString(); 

    // determine text in our dom element after the click point 
    var after = rangy.createRange(); 
    after.setStart(range.startContainer, range.startOffset+1); 
    after.setEndAfter(range.startContainer); 
    result.textAfter = after.toString(); 

    return result; 
}