如何区分使用JavaScript的网页中的空白区域和非空白区域?
如何区分使用JavaScript的网页中的空白区域和非空白区域?空白区域包括:如何区分使用JavaScript的网页中的空白区域和非空白区域?
- 未被DOM元素占用的区域。
- DOM元素的边距,边框和填充。
编辑:
作为响应第一评论:我在一个基于Web的电子书阅读器的工作。游标设置为{光标:移动}空白区域,以便用户可以拖动和滚动网页。
你可以递归遍历每个元素,并附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来处理我的东西,但是我使用那些特定的“查找位置”函数,并且发现它们是我认为最好的因素之一,因为有很多用户正在测试它们。
祝你好运!
Thx。一些真正鼓舞人心的点!我的最终解决方案应该非常接近您的建议。 – Ethan 2010-05-29 17:24:42
我的建议是去一个简单的滚动条。这是更加万无一失的。通过尝试实现酷拖动和滚动功能,您可能会面临数十种边缘案例中的很多bug行为,我们无法想象。
如果您确实想要检测空白中的点击次数,则可以尝试附加页面本身的事件onmousedown
/onmousemove
。 JavaScript事件很好地展现出来,所以你可以一次处理整个页面(除非它本身有一些JavaScript,在这种情况下你总是搞砸了)。这些事件提供鼠标X/Y坐标和被点击的元素。然后,您可以检查该元素的填充(小心使用内联元素),并确定它是否在填充中。您不需要检查边距,因为点击会在父元素中产生点击。
虽然您以这种方式获得的效果是很多分散的“拖动区域”,用户为了滚动页面将不得不寻找。我怀疑这会适合你的用户。更好的做法是让整个页面“可拖动”,但是然后你将失去选择文本的能力。或者像Acrobat一样,它只允许抓取页面本身的相当大的填充区域(那么你应该确保有一个可观的填充区域)。在我看来,它并不比滚动条好得多。 :P
我同意你的意见“滚动条更好”。但是我的客户问我是否有可能这样做,而且我说技术上是肯定的;( – Ethan 2010-05-29 17:21:56
@Ethan--你不能再讨论并说你错了,实施这个会很困难吗? – 2010-05-30 01:05:59
你能对你想要完成的事情更具体吗?这可能有助于人们弄清楚如何帮助您 – iangraham 2010-05-29 05:15:44
您是否尝试做某种碰撞检测(即在给定的x,y点处找到特定的DOM元素,或者在该点是否存在DOM元素?) – cryo 2010-05-29 05:40:27