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

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

首先，我们会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

投稿

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

猜你喜欢

asp和php页面全面封杀WVS扫描器的代码

显示/隐藏引出的CSS Bug

phpmyadmin 数据导入导出问题

在 mysql 中定义数据库，表，列时，设定的各个的编码格式

asp实现通过session来统计在线人数的方法

2008年Logo设计10大趋势

在IE8中继续使用滤镜及IE8的一些CSS扩展属性

window.open被浏览器拦截后的自定义提示

Oracle中sys和system的区别小结

十个简单好用的设计技巧[译]

Sql2005启用和关闭xp_cmdshell功能

使用正则表达式找出不包含特定字符串的条目

Excute后都需要返回一个RecordSet对象吗？

在网页设计中，如何使用图标来支持内容？[译]

accept-charset与Header P3P

一组常用的弹出窗口用法总结

asp中提取HTML中图片的SRC路径

数据库性能优化之冗余字段的作用

sql server数据库最大Id冲突问题解决方法之一

CSS3 + HTML5 实现未来 Web 设计

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

猜你喜欢

asp和php页面全面封杀WVS扫描器的代码

显示/隐藏引出的CSS Bug

phpmyadmin 数据导入导出问题

在 mysql 中 定义 数据库，表，列时，设定的各个的编码格式

asp实现通过session来统计在线人数的方法

2008年Logo设计10大趋势

在IE8中继续使用滤镜及IE8的一些CSS扩展属性

window.open被浏览器拦截后的自定义提示

Oracle中sys和system的区别小结

十个简单好用的设计技巧[译]

Sql2005启用和关闭xp_cmdshell功能

使用正则表达式找出不包含特定字符串的条目

Excute后都需要返回一个RecordSet对象吗？

在网页设计中，如何使用图标来支持内容？[译]

accept-charset与Header P3P

一组常用的弹出窗口用法总结

asp中提取HTML中图片的SRC路径

数据库性能优化之冗余字段的作用

sql server数据库最大Id冲突问题解决方法之一

CSS3 + HTML5 实现未来 Web 设计

在 mysql 中定义数据库，表，列时，设定的各个的编码格式