Possible Duplicate:
How to make this JavaScript much faster?




我正在尝试在jQuery中创建一个“元素选择器”,就像Firebug一样。基本上,我想突出显示用户鼠标下方的元素。这是我到目前为止的内容,但是效果不佳:

$('*').mouseover(function (event) {
    var $this = $(this);
    $div.offset($this.offset()).width($this.width()).height($this.height());
    return false;
});


var $div = $('<div>')
    .css({ 'background-color': 'rgba(255,0,0,.5)', 'position': 'absolute', 'z-index': '65535' })
    .appendTo('body');


基本上,我是将div插入具有半透明背景的DOM中。然后,我在每个元素上监听mouseover事件,然后移动div,使其覆盖该元素。

现在,只要将鼠标移到页面上,整个页面就会变成红色。我怎样才能使它更好地工作?

编辑:可以肯定的问题是,一旦我的鼠标触摸页面,主体就会被选中,然后当我四处移动鼠标时,所有瞬间都不会通过highligher,因为它覆盖了所有物体。



萤火虫

通过浏览Firebug源代码,我发现了这一点:

drawBoxModel: function(el)
{
    // avoid error when the element is not attached a document
    if (!el || !el.parentNode)
        return;

    var box = Firebug.browser.getElementBox(el);

    var windowSize = Firebug.browser.getWindowSize();
    var scrollPosition = Firebug.browser.getWindowScrollPosition();

    // element may be occluded by the chrome, when in frame mode
    var offsetHeight = Firebug.chrome.type == "frame" ? FirebugChrome.height : 0;

    // if element box is not inside the viewport, don't draw the box model
    if (box.top > scrollPosition.top + windowSize.height - offsetHeight ||
        box.left > scrollPosition.left + windowSize.width ||
        scrollPosition.top > box.top + box.height ||
        scrollPosition.left > box.left + box.width )
        return;

    var top = box.top;
    var left = box.left;
    var height = box.height;
    var width = box.width;

    var margin = Firebug.browser.getMeasurementBox(el, "margin");
    var padding = Firebug.browser.getMeasurementBox(el, "padding");
    var border = Firebug.browser.getMeasurementBox(el, "border");

    boxModelStyle.top = top - margin.top + "px";
    boxModelStyle.left = left - margin.left + "px";
    boxModelStyle.height = height + margin.top + margin.bottom + "px";
    boxModelStyle.width = width + margin.left + margin.right + "px";

    boxBorderStyle.top = margin.top + "px";
    boxBorderStyle.left = margin.left + "px";
    boxBorderStyle.height = height + "px";
    boxBorderStyle.width = width + "px";

    boxPaddingStyle.top = margin.top + border.top + "px";
    boxPaddingStyle.left = margin.left + border.left + "px";
    boxPaddingStyle.height = height - border.top - border.bottom + "px";
    boxPaddingStyle.width = width - border.left - border.right + "px";

    boxContentStyle.top = margin.top + border.top + padding.top + "px";
    boxContentStyle.left = margin.left + border.left + padding.left + "px";
    boxContentStyle.height = height - border.top - padding.top - padding.bottom - border.bottom + "px";
    boxContentStyle.width = width - border.left - padding.left - padding.right - border.right + "px";

    if (!boxModelVisible) this.showBoxModel();
},

hideBoxModel: function()
{
    if (!boxModelVisible) return;

    offlineFragment.appendChild(boxModel);
    boxModelVisible = false;
},

showBoxModel: function()
{
    if (boxModelVisible) return;

    if (outlineVisible) this.hideOutline();

    Firebug.browser.document.getElementsByTagName("body")[0].appendChild(boxModel);
    boxModelVisible = true;
}


看起来他们正在使用标准的div + css进行绘制........只需要弄清楚他们现在如何处理事件...(此文件长28K行)

还有一个代码段,我想它会检索适当的对象...。尽管我不知道如何。他们正在寻找一个类“ objectLink-element” ...,我不知道这个“ repObject”是什么。

onMouseMove: function(event)
{
    var target = event.srcElement || event.target;

    var object = getAncestorByClass(target, "objectLink-element");
    object = object ? object.repObject : null;

    if(object && instanceOf(object, "Element") && object.nodeType == 1)
    {
        if(object != lastHighlightedObject)
        {
            Firebug.Inspector.drawBoxModel(object);
            object = lastHighlightedObject;
        }
    }
    else
        Firebug.Inspector.hideBoxModel();

},




我在想,也许当mousemove或mouseover事件触发荧光笔节点时,我可以通过某种方式传递它吗?也许要掩盖...?



如果我将不可见元素放置在z索引比荧光笔更高的每个元素上方,但是给我的荧光笔z索引比实际元素更高的话……从理论上讲,它应该可以工作。不可见元素将触发鼠标事件,但是突出显示效果仍将看起来像其在实际元素上的顶部。

这意味着我只是将DOM元素增加了一倍,并且位置必须正确。除非也许我只“提升”荧光笔当前涵盖的元素?但这仍然可能是每个要素>。

最佳答案

所有这些答案都太复杂了...简单的解决方案:

Javascript:

prevElement = null;
document.addEventListener('mousemove',
    function(e){
        var elem = e.target || e.srcElement;
        if (prevElement!= null) {prevElement.classList.remove("mouseOn");}
        elem.classList.add("mouseOn");
        prevElement = elem;
    },true);


CSS:

.mouseOn{
  background-color: #bcd5eb !important;
  outline: 2px solid #5166bb !important;
}

关于jquery - jQuery:鼠标光标下的高亮元素? ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4698259/

10-12 12:31
查看更多