web-dev-qa-db-fra.com

Comment obtenir l'élément cliqué (pour l'ensemble du document)?

J'aimerais obtenir l'élément actuel (quel que soit l'élément) dans un document HTML sur lequel j'ai cliqué. J'utilise:

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

Mais très étrangement, je reçois le texte de tout le document (!), Pas l'élément cliqué.

Comment obtenir uniquement l'élément sur lequel j'ai cliqué?

Exemple

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

Si je clique sur le texte "test", j'aimerais pouvoir lire l'attribut avec $(this).attr("myclass") dans jQuery.

javascriptjqueryhtmldom
121
user1145216

Vous devez utiliser le event.target , qui est l'élément qui a déclenché l'événement à l'origine. Le this dans votre exemple de code fait référence à document.

Dans jQuery, c'est ...

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

Sans jQuery ...

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

Assurez-vous également, si vous devez prendre en charge <IE9, que vous utilisez attachEvent() au lieu de addEventListener().

199
alex

utilisez ce qui suit dans la balise body

<body onclick="theFunction(event)">

puis utilisez en javascript la fonction suivante pour obtenir l'ID

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

pour obtenir le texte de l'élément cliqué

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

Vous pouvez trouver l'élément cible dans event.target :

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

Références:

6
PPvG

Utilisez delegate et event.target . delegate tire parti de la diffusion d'événements en laissant un élément écouter et gérer les événements des éléments enfants. target est la propriété jQ-normalisée de l'objet event représentant l'objet à l'origine de l'événement.

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

Démo: http://jsfiddle.net/xXTbP/

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