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

标签: 开发日志 | 发表时间:2010-08-29 14:09 | 作者:Rank <null@null.com> 競
出处:http://www.never-online.net/blog/
首先,我们会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">&nbsp;</div>
<div id="abs-left" class="abs">&nbsp;</div>
<div id="abs-bottom" class="abs">&nbsp;</div>
<div id="abs-top" class="abs">&nbsp;</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>

补充:
看到jerry qu发现了非IE下透过事件的方法,嘿嘿。可以通过
pointer-events:none来透过事件。详情看https://developer.mozilla.org/en/CSS/pointer-events
demo: http://www.qgy18.com/file/code/firebug_demo.html

相关 [firefox firebug dom] 推荐:

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

- 競 - rank&#39;s technical notes
首先,我们会document里添加mouseover事件时在HTMLElement上飘一个absolute的容器,设置border. 接着,mousedown,这个absolute的元素隐藏;. 再着着,click结束后从事件里的event得到target,从而再得到inspect. mouseover如果在某个元素上飘一个absolute容器,那么你的over事件永远在这个absolute元素上了.

Firefox Firebug 项目领导人跳槽去 Chrome

- Tomyail - 谷奥——探寻谷歌的奥秘
对于一个项目来说,对令人感到悲催的事情就是开发工程师们跳槽了. 最近这样的悲剧就降临到了Firebug项目组身上. Firebug项目组领导人John J. Barton转投Chrome旗下. 想必Firebug大家都不会太陌生,这是一款Firefox上的插件. 如果你是一个工程师,或者开发人员,大部分的机会你会使用过它.

Firebug控制台详解

- boho - 阮一峰的网络日志
Firebug是网页开发的利器,能够极大地提升工作效率. 我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法. 控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息. Firebug内置一个console对象,提供5种方法,用来显示信息.

Firebug 1.8 正式版发布

- Jet - ITeye资讯频道
  著名的Firefox网页调试开发插件 Firebug 1.8 正式版发布了,兼容 Firefox 5.0. console.timeStamp() 可以用来方便的比较 HTTP 传输和 JavvsScript 执行时间. 可以在网络面板显示 IP 相关信息. 网格面板可以为每次请求显示远程以及本地IP地址的端口号.

Firebug Console API 与命令行

- 红茶 - WEB前端开发
前几天有人问我关于firebug console的问题,其实我平时用的最多也就是console.log,相当于alert(). 还真没深入了解其他的api,今天在jsmix上看到了,所以转载过来分享一下 Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调试使用.

DOM详解

- - CSDN博客推荐文章
 1.XML解析方式分为两种:dom和sax.   (1)dom:(Document Object Model, 即文档对象模型) 是 W3C 组织推荐的处理 XML 的一种方式.   (2) sax:(Simple API for XML) 不是官方标准,但它是 XML 社区事实上的标准,几乎所有的 XML 解析器都支持它.

javaScript DOM使用

- - CSDN博客互联网推荐文章
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. 1 修改HTML元素内容. document.write(Date()); //在输入流中直接写 document.getElementById(id).innerHTML=new HTML. //改变已经有的元素内容 document.getElementById("image").src="landscape.jpg";.

DOM优化

- - JavaScript - Web前端 - ITeye博客
1,Javascript语音与DOM操作就像孤岛. 他们之间的通行是要借助船的,而使用船是有很大成本的. 所以,要先做完一个再做另一个,最好不要交替进行. 如:添加1000个li时,先用一个字符串拼接好,最后一次追加到父节点,而不是向父节点追加1000次,一次追加一个. 如:添加1000个li时,先放到fragment,再添加到UL中.

Android DOM解析XML

- - CSDN博客移动开发推荐文章
if(personChilds.item(y).getNodeType()==Node.ELEMENT_NODE){//判断当前节点是否是元素类型节点. 作者:jaycee110905 发表于2013-2-7 21:04:29 原文链接. 阅读:78 评论:0 查看评论.

jquery和DOM比较

- - JavaScript - Web前端 - ITeye博客
1、window.onload和$(document).ready()的区别. 必须等整个网页中所有的内容加载完毕后(包括图片)才能执行. 网页中所有DOM结构绘制完毕后就执行,可能DOM元素并没有加载完. 2、jquery对象和DOM对象的区别. Juery对象是包装DOM后的产生的对象,DOM是原生对象,是一个基本的文档结构.