Javascript:让用户选择像 Firebug 这样的 HTML 元素？

Question

我想编写一个浏览器(Chrome/FF)扩展程序，需要选择网页上的元素。我希望它的行为像 Firebug 的元素检查器那样。单击检查箭头，然后可以悬停/突出显示元素。当您单击所需的元素时，系统会检查该元素。我只是对允许用户选择元素的代码感兴趣 - 而不是实际检查它或类似的东西。

因为我正在编写一个扩展，所以如果您可以提供非 jQuery/Prototype/等代码可能会很好，这样我就不必分发它。

Answer 1

我最近在我正在从事的一个项目中需要这样的功能，结果我必须使用侧面来创建一个盒子，否则 event.target当您移动鼠标时，最终将成为选择器，如果我使用 z-index: -1当你有很多重叠的元素时......等等，这会有点可疑。

这是我为了您的利益而从我的项目转换的版本，它涉及 jQuery，但转换为 vanilla 非常简单，因为只有 mousemove & css使用 jQuery 的方法。

分步说明。

首先创建所需的 5 个 HTMLElement。

<div id="selector">
    <div id="selector-top"></div>
    <div id="selector-left"></div>
    <div id="selector-right"></div>
    <div id="selector-bottom"></div>
</div>

其次创建mousemove事件于 document (或您的容器)

$(document).mousemove(function(event) { ... });

然后在mousemove里面我们将进行一些基本检查以防止选择 HTML, BODY, selector

var id = event.target.id, tagName = event.target.tagName;

if(id.indexOf('selector') !== -1 || tagName === 'BODY' || tagName === 'HTML') {
   return;
} 

然后我们需要创建一个对象来存储我们的元素，如下所示。

var elements = {
    top: $('#selector-top'),
    left: $('#selector-left'),
    right: $('#selector-right'),
    bottom: $('#selector-bottom')
};

之后，我们存储一些变量来保存有关目标元素的一些信息，如下所示。

var $target = event.target;
    targetOffset = $target.getBoundingClientRect(),
    targetHeight = targetOffset.height,
    targetWidth  = targetOffset.width;

然后我们要做的就是计算选择器所有4边的位置和高度，如下所示。

elements.top.css({
    left:  (targetOffset.left - 4),
    top:   (targetOffset.top - 4),
    width: (targetWidth + 5)
});

elements.bottom.css({
    top:   (targetOffset.top + targetHeight + 1),
    left:  (targetOffset.left  - 3),
    width: (targetWidth + 4)
});

elements.left.css({
    left:   (targetOffset.left  - 5),
    top:    (targetOffset.top  - 4),
    height: (targetHeight + 8)
});

elements.right.css({
    left:   (targetOffset.left + targetWidth + 1),
    top:    (targetOffset.top  - 4),
    height: (targetHeight + 8)
});

所有+aFewPixels只是一点点优化，所以有像 2px选择器和目标之间的间隙。

对于CSS这就是我想出的办法。

#selector-top, #selector-bottom {
    background: blue;
    height:3px;
    position: fixed;
    transition:all 300ms ease;
}

#selector-left, #selector-right {
    background: blue;
    width:3px;
    position: fixed;
    transition:all 300ms ease;
}

transition给选择器一个非常好的滑动效果。

尝试演示 http://jsfiddle.net/rFc8E/9/

Note: This also works for transform: scale(2); eg. when a element is scaled in size.

编辑:我刚刚更新了此内容，我注意到 elements对象位于事件处理程序内部，我已在演示中将其移至外部，这是相当重要的性能改进，因为现在 elements对象仅创建一次，而不是数十万(如果不是在 mousemove 内数百万次)事件。