如何區分使用JavaScript的網頁中的空白區域和非空白區域？

Question

如何區分使用JavaScript的網頁中的空白區域和非空白區域？空白區域包括：

• 未被DOM元素佔用的區域。
• DOM元素的邊距，邊框和填充。

編輯：
作爲響應第一評論：我在一個基於Web的電子書閱讀器的工作。遊標設置爲{光標：移動}空白區域，以便用戶可以拖動和滾動網頁。

Answer 1

你可以遞歸遍歷每個元素，並附onmouseover和onmouseout事件（其中前者使text光標，後者使move光標）對每一個有它的文字，如：

function attachEvents(e) { 
    if (n.nodeType == 3) { // Node.TEXT_NODE 
     // A text node - add the parent as an element to select text in 
     e.parentNode.onmouseover = elmMouseOver /* define your own event fns */ 
     e.parentNode.onmouseout = elmMouseOut 
    } 
    else if (n.nodeType == 1) { // Node.ELEMENT_NODE 
     for (var m=e.firstChild; m != null; m = m.nextSibling) { 
      attachEvents(m) 
     } 
    } 
} 

我能想到的最好的方法是確保它實際上是「文本」，而不是一個空白的區域是使用例如<div><span>content</span></div>並將mouseover/mouseout事件置於<span>中，以便空白區域不觸發事件。如果可以的話，這就是我所推薦的做法，因爲如果您根據我的經驗使用帶填充的塊元素，情況會變得非常複雜。例如：

| The quick brown fox jumps | 
| over the lazy dog   | <- onmouseover/out of SPANs will ignore the space 
           after "dog" while DIVs won't and you won't need 
           to calculate padding/margins/positions which 
           makes it faster and more simple to implement 

如果你必須使用塊的DIV：您可以使用像jQuery的jSizes插件來獲得利潤/像素填充或this（一種方式來獲得繼承的CSS值和解析自己通過從末尾刪除px部分等）

之後，您可以使用jQuery中的position()找出位置。我個人不會使用jQuery來處理我的東西，但是我使用那些特定的「查找位置」函數，並且發現它們是我認爲最好的因素之一，因爲有很多用戶正在測試它們。

祝你好運！

Answer 2

我的建議是去一個簡單的滾動條。這是更加萬無一失的。通過嘗試實現酷拖動和滾動功能，您可能會面臨數十種邊緣案例中的很多bug行爲，我們無法想象。

如果您確實想要檢測空白中的點擊次數，則可以嘗試附加頁面本身的事件onmousedown/onmousemove。 JavaScript事件很好地展現出來，所以你可以一次處理整個頁面（除非它本身有一些JavaScript，在這種情況下你總是搞砸了）。這些事件提供鼠標X/Y座標和被點擊的元素。然後，您可以檢查該元素的填充（小心使用內聯元素），並確定它是否在填充中。您不需要檢查邊距，因爲點擊會在父元素中產生點擊。

雖然您以這種方式獲得的效果是很多分散的「拖動區域」，用戶爲了滾動頁面將不得不尋找。我懷疑這會適合你的用戶。更好的做法是讓整個頁面「可拖動」，但是然後你將失去選擇文本的能力。或者像Acrobat一樣，它只允許抓取頁面本身的相當大的填充區域（那麼你應該確保有一個可觀的填充區域）。在我看來，它並不比滾動條好得多。 ：P