Wie wird das Element angeklickt (für das gesamte Dokument)?

149

Ich möchte das aktuelle Element (egal welches Element) in einem HTML-Dokument abrufen, auf das ich geklickt habe. Ich benutze:

$(document).click(function () {
    alert($(this).text());
});

Aber sehr seltsamerweise erhalte ich den Text des gesamten (!) Dokuments, nicht das angeklickte Element.

Wie bekomme ich nur das Element, auf das ich geklickt habe?

Beispiel

<body>
    <div class="myclass">test</div>
    <p>asdfasfasf</p>
</body>

Wenn ich auf den Text "test" klicke, möchte ich das Attribut mit $(this).attr("myclass") in jQuery lesen können .

javascript jquery html dom user1145216
quelle
2
Die Handlerfunktion wird im Bereich des Elements ausgeführt, zu dem sie hinzugefügt wurde, hier das Dokument. Sie müssen die targetEigenschaft des Ereignisobjekts abrufen.
Bergi

Antworten:

237

Sie müssen event.targetdas Element verwenden, das das Ereignis ursprünglich ausgelöst hat. Der thisin Ihrem Beispielcode bezieht sich auf document.

In jQuery ist das ...

$(document).click(function(event) {
    var text = $(event.target).text();
});

Ohne jQuery ...

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;   
}, false);

Stellen Sie außerdem sicher, dass Sie <IE9 unterstützen müssen, das Sie attachEvent()anstelle von verwenden addEventListener().

Alex
quelle
1
Ich fand, dass das Element, das zurückgegeben wurde, irgendwie etwas anders war, also konnte ich nicht tun, was if(event.target === myjQueryDivElement)ich tun musste: if(event.target.hasClass('mydivclass'))wo mydivclass eine Klasse war, die mein Element hatte.
Redfox05
Ich habe 3 Tage lang nach einer Lösung in Safari gesucht und bin schließlich auf diesen Beitrag gestoßen. Ihr rockt danke
Raymond Feliciano
3
@alex hey, sollte es sein || target.innerText?
Jevgeni Smirnov
30

event.target um das zu bekommen element

window.onclick = e => {
    console.log(e.target);  // to get the element
    console.log(e.target.tagName);  // to get the element tag name alone
}

um den Text vom angeklickten Element zu erhalten

window.onclick = e => {
    console.log(e.target.innerText);
}
bhv
quelle
26

Verwenden Sie im Body-Tag Folgendes

<body onclick="theFunction(event)">

Verwenden Sie dann in Javascript die folgende Funktion, um die ID zu erhalten

<script>
function theFunction(e)
{ alert(e.target.id);}

Malek Tubaisaht
quelle
3

Verwenden Sie delegateund event.target. delegatenutzt das Sprudeln von Ereignissen, indem ein Element Ereignisse auf untergeordnete Elemente abhört und behandelt. targetist die jQ-normalisierten Eigenschaft des eventObjekts , von dem das Objekt, das das Ereignis stammte.

$(document).delegate('*', 'click', function (event) {
    // event.target is the element
    // $(event.target).text() gets its text
});

Demo: http://jsfiddle.net/xXTbP/

JAAulde
quelle
2
Sollte in der heutigen Zeit erwähnt on()werden, die über empfohlen werden sollte delegate(). Auch documentist wahrscheinlich die einzige Ausnahme, um delegate()/ nicht zu verwenden, on()da sie ohnehin bis zum höchsten Punkt der Handhabung sprudeln.
alex
Guter Anruf. Wir haben in meinem Tagesjob noch kein Upgrade auf die neueste jQuery durchgeführt on.
JAAulde
1
@alex, da die Ereignisse sowieso sprudeln und der Handler trotzdem ausgeführt werden muss, ist das nicht wirklich eine Ausnahme, oder? Es ist einfach nicht so anders ist alles. Ich denke, delegatehat den
Filteraufwand
2

Ich weiß, dass dieser Beitrag wirklich alt ist, aber um den Inhalt eines Elements in Bezug auf seine ID zu erhalten, würde ich Folgendes tun:

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}
Aft3rL1f3
quelle
1 
$(document).click(function (e) {
    alert($(e.target).text());
});

quelle
-2

Hier ist eine Lösung, die einen jQuery-Selektor verwendet, mit dem Sie problemlos Tags jeder Klasse, ID, jedes Typs usw. anvisieren können.

jQuery('div').on('click', function(){
    var node = jQuery(this).get(0);
    var range = document.createRange();
    range.selectNodeContents( node );
    window.getSelection().removeAllRanges();
    window.getSelection().addRange( range );
});
Henry Lockett
quelle