模拟里 firebug 的 DOM inspect 功能

常规思路

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

  • 首先,我们会 document 里添加 mouseover 事件时在 HTMLElement 上飘一个 absolute 的容器,设置 border 。
  • 接着, mousedown ,这个 absolute 的元素隐藏;
  • 再着着, click 结束后从事件里的 event 得到 target ,从而再得到 inspect 。

可这样是不是真的能做到呢? 忽视了一点。
mouseover 如果在某个元素上飘一个 absolute 容器,那么你的 over 事件永远在这个 absolute 元素上了。

可惜不是 as , as 可以把某个容器的事件 enable 设为 false 即可。
DOM w3c 没有禁用事件的功能。

打破常规

回到题目,那怎么做呢?
同事能跳出刚才的程序思维——用 4 个 div 当 4 条边就可以了。

不知道你第还没试之前的分析是否是这样的呢? 我当时在想,在 coding 的时候能跳出原来传统的思维真是不易。太赞了!

写个简单 demo 记念(用 firefox 看吧。 ) 八卦一下,据观察, firebug 确实真的也是这么做的(没看代码,只看了 DOM tree 里多了几个 div )。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <title>rank's HTML Document</title>
 <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>

穿透事件

不能像 AS 一样禁止事件,但是非 IE 下可穿透事件。
非 IE 下可以通过 pointer-events:none 来透过事件,这里有个 demo

-- EOF --

Comments