Question

如何使用JavaScript区分网页中的空白区域和非空白区域？空白区域包括：

未被DOM元素占用的区域。
DOM元素的边距，边框和填充。

编辑：
作为对第一条评论的回应：我正在研究基于网络的电子书阅读器。对于空白区域，光标设置为{cursor：move}，以便用户可以拖动和滚动网页。

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

我的建议是选择一个简单的滚动条。这更加万无一失。通过尝试实现酷炫的拖放功能，您可能会遇到许多边缘情况中的许多错误行为，我们甚至都无法想象。

如果您确实想要检测空格中的点击次数，可以尝试附加到页面本身的onmousedown / onmouseup / onmousemove个事件。 JavaScript事件泡得很好，所以你将立即处理整个页面（除非它本身有一些JavaScript，在这种情况下你总是搞砸了）。这些事件提供鼠标X / Y坐标和单击的元素。然后你可以检查该元素的填充（小心内联元素）并确定它是否在填充中。您无需检查边距，因为单击该边距将改为在父元素中生成单击。

虽然你通过这种方式获得的效果是很多分散的“拖动区域”，用户必须为了滚动页面而不得不寻找它。我怀疑这将与您的用户保持良好关系。然后更好地使整个页面“可拖动”，但是你将失去选择文本的能力。或者像Acrobat一样，只允许抓住页面本身相当大的填充区域（然后你应该确保有相当大的填充区域）。在我眼里哪个并不比滚动条好多少。：P

如何使用JavaScript区分网页中的空白区域和非空白区域？

2 个答案: