位置：首页>> 网络编程>> JavaScript>> 在firefox里如何实现firebug的DOM inspect选择功能?

在firefox里如何实现firebug的DOM inspect选择功能?

作者：Rank　来源：never-online　发布时间：2010-09-03 18:20:00　

标签：firefox,firebug,dom

首先，我们会document里添加mouseover事件时在HTMLElement上飘一个absolute的容器，设置border。

接着，mousedown，这个absolute的元素隐藏；

再着着，click结束后从事件里的event得到target，从而再得到inspect。可这样是不是真的能做到呢？

忽视了一点。mouseover如果在某个元素上飘一个absolute容器，那么你的over事件永远在这个absolute元素上了。

事件透视过去？可惜不是as，as可以把某个容器的事件enable设为false即可。脚本/DOM据我了解没有禁用事件的功能。

回到题目，那怎么做呢？

小龙人和好奇能跳出刚才的程序思维——用四个div当四条边就可以了。不知道你第还没试之前的分析是否是这样的呢？

我当时在想，在coding的时候能跳出原来传统的思维真是不易。太赞了!

写个简单demo记念（用firefox看吧。)

八卦一下，据观察，firebug确实真的也是这么做的（没看代码）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head></head> <body><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><style>.abs {position:absolute;zoom:1}</style><div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div><div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div><div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div><div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div><div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div><div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div><div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div><div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div><div id="abs-right" class="abs"> </div><div id="abs-left" class="abs"> </div><div id="abs-bottom" class="abs"> </div><div id="abs-top" class="abs"> </div><script type="text/javascript">//<![CDATA[$(document).mouseover(function(e) { var target = e.target; var width = target.offsetWidth; var height = target.offsetHeight; var pos = $(target).offset(); $('#abs-top').css({"background":"blue","left":pos.left,"top":pos.top,"width":width,"height":1}); $('#abs-bottom').css({"background":"blue","left":pos.left,"top":pos.top+height,"width":width,"height":1}); $('#abs-left').css({"background":"blue","left":pos.left,"top":pos.top,"width":1,"height":height}); $('#abs-right').css({"background":"blue","left":pos.left+width,"top":pos.top,"width":1,"height":height});});$(document).click(function(e) { alert($(e.target).html());});//]]></script> </body></html>

投稿

在firefox里如何实现firebug的DOM inspect选择功能?

猜你喜欢