Ruft die ID des Elements ab, das eine Funktion aufgerufen hat

Lesezeit: 5 Minuten

Benutzer-Avatar
Ambo100

Wie kann ich die ID eines Elements abrufen, das eine JS-Funktion aufgerufen hat?

Körper.jpg ist ein Bild eines Hundes, wenn der Benutzer mit seiner Maus über den Bildschirm auf verschiedene Körperteile zeigt, wird ein vergrößertes Bild angezeigt. Die ID des Bereichselements ist identisch mit dem Bilddateinamen abzüglich des Ordners und der Erweiterung.

<div>
    <img src="https://stackoverflow.com/questions/7627161/images/body.jpg" usemap="#anatomy"/>
</div>

<map name="anatomy">
  <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/>
</map>

<script type="text/javascript">
function zoom()
{
 document.getElementById("preview").src="images/nose.jpg";
}
</script>

<div>
<img id="preview"/>
</div>

Ich habe meine Nachforschungen angestellt und bin als letzter Ausweg zu Stack Overflow gekommen. Ich bevorzuge eine Lösung, die jQuery nicht beinhaltet.

Benutzer-Avatar
James Sumners

Übergeben Sie eine Referenz auf das Element an die Funktion, wenn sie aufgerufen wird:

<area id="nose" onmouseover="zoom(this);" />

<script>
  function zoom(ele) {
    var id = ele.id;

    console.log('area element id = ' + id);
  }
</script>

  • Weißt du, dass das dir das geben wird <img> Element und nicht das <area> oder <map> Element? Ich nicht, aber ich werde eine jsfiddle versuchen.

    – Spitze

    2. Oktober 2011 um 15:17 Uhr


  • @ Pointy Du hast recht. Ich habe nicht nachgedacht. Ich habe mein Beispiel korrigiert.

    – James Sumners

    2. Oktober 2011 um 15:43 Uhr

  • Notiz: href="javascript:void(zoom(this));" gibt das Fenster zurück. Mehr Grund zu verwenden onmouseclick stattdessen.

    – Belladonna

    17. April 2013 um 15:23 Uhr

Benutzer-Avatar
jfriend00

Ich bin überrascht, dass niemand die Verwendung erwähnt hat this im Eventhandler. Es funktioniert automatisch in modernen Browsern und kann in anderen Browsern zum Laufen gebracht werden. Wenn du benutzt addEventListener oder attachEvent Ihren Event-Handler zu installieren, dann können Sie den Wert von machen this automatisch dem Objekt zugewiesen, das das Ereignis erstellt hat.

Darüber hinaus ermöglicht Ihnen der Benutzer von programmgesteuert installierten Event-Handlern, Javascript-Code von HTML zu trennen, was oft als eine gute Sache angesehen wird.

So würden Sie das in Ihrem Code in einfachem Javascript tun:

Entferne das onmouseover="zoom()" aus Ihrem HTML und installieren Sie den Event-Handler wie folgt in Ihrem Javascript:

// simplified utility function to register an event handler cross-browser
function setEventHandler(obj, name, fn) {
    if (typeof obj == "string") {
        obj = document.getElementById(obj);
    }
    if (obj.addEventListener) {
        return(obj.addEventListener(name, fn));
    } else if (obj.attachEvent) {
        return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));
    }
}

function zoom() {
    // you can use "this" here to refer to the object that caused the event
    // this here will refer to the calling object (which in this case is the <map>)
    console.log(this.id);
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg";
}

// register your event handler
setEventHandler("nose", "mouseover", zoom);

Sie können ‘this’ im Ereignishandler verwenden:

document.getElementById("preview").onmouseover = function() {
    alert(this.id);
}

Oder übergeben Sie das Ereignisobjekt wie folgt an den Handler:

document.getElementById("preview").onmouseover = function(evt) {
    alert(evt.target.id);
}

Es wird empfohlen, AttachEvent (für IE < 9)/addEventListener (IE9 und andere Browser) zu verwenden, um Ereignisse anzuhängen. Das obige Beispiel dient der Kürze.

function myHandler(evt) {
    alert(evt.target.id);
}

var el = document.getElementById("preview");
if (el.addEventListener){
    el.addEventListener('click', myHandler, false); 
} else if (el.attachEvent){
    el.attachEvent('onclick', myHandler);
}

Benutzer-Avatar
Spitz

Sie können das Handler-Setup wie folgt codieren:

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/>

Dann this in Ihrem Handler bezieht sich auf das Element. Nun, ich biete den Vorbehalt an, dass ich nicht 100% sicher bin, was passiert, wenn Sie einen Handler in einem haben <area> Tag, vor allem, weil ich noch keinen gesehen habe <area> tag in wie einem Jahrzehnt oder so. ich denken es sollte Ihnen das Bild-Tag geben, aber das könnte falsch sein.

bearbeiten – ja, es ist falsch – du verstehst das <area> Etikett, nicht das <img>. Sie müssen also das übergeordnete Element dieses Elements (die Karte) abrufen und dann das Bild finden, das es verwendet (d. h. die <img> dessen Attribut “usemap” sich auf den Namen der Karte bezieht).

erneut bearbeiten – außer es spielt keine Rolle, weil Sie wollen die “id” des Bereichs durr. Entschuldigung, dass ich nicht richtig gelesen habe.

Ich weiß, dass Sie keine jQuery-Lösung wollen, aber das Einfügen von Javascript in HTML ist ein großes Nein, nein.

Ich meine, Sie können es tun, aber es gibt viele Gründe, warum Sie es nicht tun sollten (lesen Sie sich unaufdringliches Javascript durch, wenn Sie die Details wollen).

Im Interesse anderer Personen, die diese Frage möglicherweise sehen, ist hier die jQuery-Lösung:

$(document).ready(function() {
  $('area').mouseover(function(event) {
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id'));
  });
});

Der Hauptvorteil besteht darin, dass Sie keinen JavaScript-Code mit HTML mischen. Darüber hinaus müssen Sie dies nur einmal schreiben und es funktioniert für alle Tags, anstatt den Handler für jedes separat angeben zu müssen.

Ein zusätzlicher Vorteil besteht darin, dass jeder jQuery-Handler ein Ereignisobjekt erhält, das viele nützliche Daten enthält – wie z. B. die Quelle des Ereignisses, den Typ des Ereignisses usw., was es viel einfacher macht, die Art von Code zu schreiben, nach der Sie suchen.

Da es sich schließlich um jQuery handelt, müssen Sie sich keine Gedanken über Cross-Browser-Sachen machen – ein großer Vorteil, insbesondere beim Umgang mit Ereignissen.

Benutzer-Avatar
Suraj Gupta

Ich möchte auch, dass dies geschieht. Übergeben Sie einfach die ID des Elements in der aufgerufenen Funktion und verwenden Sie sie in meiner js-Datei:

function copy(i,n)
{
 var range = document.createRange();
range.selectNode(document.getElementById(i));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range); 
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById(n).value = "Copied";
}

Benutzer-Avatar
Roger

Für andere, die unerwartet das Window-Element erhalten, eine häufige Falle:

<a href="https://stackoverflow.com/questions/7627161/javascript:myfunction(this)">click here</a>

was eigentlich reicht this zum Window-Objekt. Stattdessen:

<a href="https://stackoverflow.com/questions/7627161/javascript:nop()" onclick="myfunction(this)">click here</a>

übergibt die a Objekt wie erwartet. (nop() ist nur eine beliebige leere Funktion.)

1159310cookie-checkRuft die ID des Elements ab, das eine Funktion aufgerufen hat

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy