webentwicklung-frage-antwort-db.com.de

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

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

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

Aber sehr seltsam, ich bekomme 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 "Test" -Text klicke, möchte ich das Attribut mit $(this).attr("myclass") in jQuery lesen können.

javascriptjqueryhtmldom
121
user1145216

Sie müssen das event.target verwenden, das das Element ist, das das Ereignis ursprünglich ausgelöst hat. Das this in 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 attachEvent() anstelle von addEventListener() verwenden, wenn Sie <IE9 unterstützen müssen.

199
alex

verwenden Sie im Body-Tag Folgendes

<body onclick="theFunction(event)">

verwenden Sie dann in Javascript die folgende Funktion, um die ID zu ermitteln

<script>
function theFunction(e)
{ alert(e.target.id);}
16
Malek Tubaisaht
window.onclick = e => {
    console.log(e.target);
    console.log(e.target.tagName);
}

um den Text vom angeklickten Element abzurufen

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

Sie finden das Zielelement in event.target :

$(document).click(function(event) {
    console.log($(event.target).text());
});

Verweise:

6
PPvG

Verwenden Sie delegate und event.target . delegate nutzt das Ereignis-Bubbling aus, indem ein Element Ereignisse für untergeordnete Elemente abhört und verarbeitet. target ist die jQ-normalisierte Eigenschaft des Objekts event, das das Objekt darstellt, von dem das Ereignis stammt.

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

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

3
JAAulde
$(document).click(function (e) {
    alert($(e.target).text());
});
0
user1170406