Comment faire cliqué sur l'élément (pour tout le document)?

150

Je voudrais 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, j'obtiens 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", je voudrais pouvoir lire l'attribut avec $(this).attr("myclass") dans jQuery.

javascript jquery html dom user1145216
la source
2
La fonction handler s'exécute dans la portée de l'élément auquel elle est ajoutée, ici le document. Vous devrez obtenir la targetpropriété de l'objet événement.
Bergi

Réponses:

238

Vous devez utiliser le event.targetqui est l'élément qui a déclenché l'événement à l'origine. Le thisdans 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);

Vérifiez également si vous devez prendre en charge <IE9 que vous utilisez à la attachEvent()place de addEventListener().

Alex
la source
1
J'ai trouvé que l'élément qui était retourné était légèrement différent d'une manière ou d'une autre, donc je ne pouvais pas faire, if(event.target === myjQueryDivElement)je devais faire: if(event.target.hasClass('mydivclass'))où mydivclass était une classe que mon élément avait.
redfox05
Je cherchais un travail dans Safari depuis 3 jours et je suis finalement tombé sur ce post. Merci les gars
Raymond Feliciano
3
@alex hey, devrait-il être || target.innerText?
Jevgeni Smirnov le
30

event.target pour obtenir le element

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

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

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

utiliser 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);}

Malek Tubaisaht
la source
3

Utilisez delegateet event.target. delegatetire parti du bouillonnement d'événements en laissant un élément écouter et gérer les événements sur les éléments enfants. targetest la propriété normalisée jQ de l' eventobjet représentant l'objet dont est issu 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/

JAAulde
la source
2
Doit être mentionné dans ce jour et l'âge qui on()devrait être recommandé delegate(). En outre, documentc'est probablement la seule exception à ne pas utiliser delegate()/ on()car ils bouillonnent de toute façon au plus haut point de manipulation.
alex le
Bon appel. Nous n'avons pas mis à niveau vers le jQuery le plus récent à mon travail de jour, alors cela onme glisse.
JAAulde
1
@alex, puisque les événements bouillonnent de toute façon, et puisque le gestionnaire doit fonctionner malgré tout, ce n'est pas vraiment une exception, n'est-ce pas? Ce n'est tout simplement pas si différent. Je suppose delegateque la surcharge de filtrage à prendre en compte, cependant ...
JAAulde
2

Je sais que ce post est vraiment vieux mais, pour obtenir le contenu d'un élément en référence à son identifiant, voici ce que je ferais:

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

la source
-2

Voici une solution qui utilise un sélecteur jQuery afin que vous puissiez facilement cibler les balises de n'importe quelle classe, ID, type, etc.

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
la source