Как выделить элемент HTML по щелчку мыши?

Question

Можно ли написать код на JavaScript, который выделяет границы элемента HTML, на котором стоит (или щелкает) указатель мыши, аналогично тому, что делает Firebug , но без использования расширение браузера, а скорее полагаться только на JavaScript?

Если это так, возможно ли получить соответствующий элемент из кода HTML после щелчка мышью по элементу?

[править] Спасибо за ответы! Можно ли запустить эти примеры на внешней странице (а не на странице, которую я создал) без использования таких вещей, как GreaseMonkey?

Answer 1

Вот простой пример. Вы должны быть в состоянии основываться на этом:

document.onclick = function(e) {
    var event = e || window.event;

    // this is the element you want:
    var target = e.target || e.srcElement;
}

Этот метод, вероятно, будет более предпочтительным:

var hilightElement = function(e) {
    var event = e || window.event;

    // this is the element you want:
    var target = e.target || e.srcElement;
};

if (document.addEventListener){
    document.addEventListener('click', hilightElement, false);
} else if (document.attachEvent){
    document.attachEvent('onclick', hilightElement);
}

Answer 2

Прослушивание событий щелчка на объекте document. Затем вы можете исследовать объект события, чтобы выяснить, какой элемент был нажат, а затем изменить его CSS border или outline, как требуется.

Очень простой пример, который не пытается учесть проблемы кросс-браузерной совместимости:

document.addEventListener('click', function (e) {
        e.target.style.outline = "solid blue 1px";
});

Answer 3

Пример для JQuery:

$('#myElement'/* Replace with asterisk if you want it to work for every element */).click
(
    function()
    {
        $(this).css('outline', '1px solid red');
    }
);