Добраться туда ... еще нужно немного поработать. Я посмотрю что я могу сделать.

жный дубликат:
Как сделать этот JavaScript намного быстрее?

Я пытаюсь создать «элемент выбора» в 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, я нашел это:

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, и расположение должно быть правильным.Если не возможно я только "поднимаю" элементы, которые маркер в настоящее время покрывает ?? Но это все же может быть каждый элемент>. <Кто-нибудь, помогите мне!

Ответы на вопрос(5)

Ваш ответ на вопрос