Wie zum Höhepunkt HTML-element auf der Maus klicken?

Ist es möglich, code zu schreiben, in JavaScript, unterstreicht die Grenzen der HTML-element, auf dem der Mauszeiger steht (oder Klicks), in einer ähnlichen Weise zu dem, was Firebug, aber ohne die Verwendung einer browser-Erweiterung, sondern verlassen sich auf JavaScript allein?

Wenn dem so ist, ist es möglich, dass das relevante element, das aus HTML-code, nachdem Sie die Maus, klicken Sie auf element?

[edit] Danke für die Antworten! ist es möglich, die Beispiele auf externe Seite (anstatt auf einer Seite, die ich erstellt, ohne den Einsatz von Dingen wie GreaseMonkey?

  • Firebug hat Zugriff auf die Erweiterungen-APIs, die eine Codeausführung in einer Webseite nicht, so dass nicht unbedingt Folgen.
InformationsquelleAutor shahar_m | 2011-04-25
  1. 4

    Hier ist ein einfaches Beispiel. Sie sollten in der Lage sein zu bauen auf diese:

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

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

    Diese Methode wäre wahrscheinlich mehr bevorzugt:

    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);
}
    InformationsquelleAutor Eli
  2. 3

    Hören für click-events auf der document Objekt. Sie können dann überprüfen Sie das Ereignis-Objekt, um herauszufinden, welches element geklickt wurde, und dann die Veränderung seiner CSS - border oder outline wie gewünscht.

    Einem sehr einfachen Beispiel, dass nicht versuchen, Konto für cross-browser-Kompatibilität Probleme wären:

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

    Beispiel für JQuery:

    $('#myElement'/* Replace with asterisk if you want it to work for every element */).click
(
    function()
    {
        $(this).css('outline', '1px solid red');
    }
);
    • Oh Nein, Sie sollten wirklich nicht Anhängen Ereignis-Listener, um alle verfügbaren Elemente. Es ist besser zu befestigen handler document bekommen und den angeklickt-element mit dem Event-interface. Außerdem wollte er nicht Fragen, für eine jQuery Lösung.
    InformationsquelleAutor Agares
Schreibe einen Kommentar