elementFromPoint() 函数

今天遇到了个好玩的js函数,看题目已经了解的就可以忽略了,或许是我太土了。这个函数我在 权威指南里都没找到,晚上回来后,查了下文档,mozilla的文档W3C的

这个函数是干什么的呢?通过这个函数,我们可以通过找到文档中任意一点所对应的 element ,这个是我在看 firebug 源码的时候发现的,写了简单的代码测试了一下,目前我机器上的浏览器都支持,分别是 firefox3.6+, chrome 5+, opera 10+, IE 8.其他浏览是是否支持未知。

用法就是 var el= document.elementFromPoint(offsetX, offsetY); 就可以获得元素了,你可以把我下面的代码加入到任意网页中,看看效果便知,为了在 非firefox浏览器测试方便,加入了 firebug lite

贴代码:


<script type='text/javascript'
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
		<script type="text/javascript">
			if(document.addEventListener){
				document.addEventListener("mousemove",logThis,true);
			}else{
				document.attachEvent("onmousemove",logThis);
			}
			var time=0;
			function logThis(e){
				if(new Date()-time>500){
					var el= document.elementFromPoint(e.clientX, e.clientY);
					console.log(el);
					time=+new Date();
				}
			}
		</script>

根据 firebug 的源码显示,在 opera和safari中有滚动条的情况下,会表现的不一致,需要 X Y 分别要加上scroll.x和 scroll.y。firebug 里的代码是这样的

var scroll = this.getWindowScrollPosition();
return this.document.elementFromPoint(x + scroll.left, y + scroll.top);

var scroll = this.getWindowScrollPosition();

return this.document.elementFromPoint(x + scroll.left, y + scroll.top);

有兴趣的可以去看看文档,明天要去舟山玩,写的条理比较乱,不过这个函数也没什么难度,应该很容易就看懂了。