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 .

— 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

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

7

Sie finden das Zielelement in event.target:

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

Verweise:

http://api.jquery.com/event.target/

— Peter-Paul van Gemerden
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());
});

-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