在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选择功能?

猜你喜欢

windows下Virtualenvwrapper安装教程

Python简单实现安全开关文件的两种方式

实际应用：MySQL5存储过程编写

简单谈谈python中的多进程

SQLServer 连接失败错误故障的分析与排除

用python写个颜值评分器筛选最美主播

MYSQL 数据库命名与设计规范

跨浏览器的CSS固定定位{position:fixed}

chr()函数参照表 chr13 chr10 chr34

python itchat实现微信好友头像拼接图的示例代码

使用element-ui +Vue 解决 table 里包含表单验证的问题

基于Python实现视频转字符画动漫小工具

tensorflow实现训练变量checkpoint的保存与读取

Python入门(六)Python数据类型

基于opencv的selenium滑动验证码的实现

Python判断一个三位数是否为水仙花数的示例

Python实现的质因式分解算法示例

HTML5 第二份草案发布

java编写创建数据库和表的程序

vue开发移动端h5环境搭建的全过程