可能重复:
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,使其覆盖该元素。
现在,只要你把鼠标移到页面上,整个页面就会变成红色。我怎样才能让它更好地工作呢?
编辑:非常确定的问题是,只要我的鼠标触摸页面,主体就会被选中,然后当我移动鼠标时,所有的时刻都不会通过荧光笔,因为它超出了一切。
Firebug
通过深入研究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元素增加了一倍,并且定位必须正确。除非我可能只“提升”荧光笔当前覆盖的元素??但这仍然可能是每一个元素>.<谁来帮帮我!
https://stackoverflow.com/questions/4698259
复制相似问题