如何区分使用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