Come fare clic sull'elemento (per l'intero documento)?

150

Vorrei ottenere l'elemento corrente (qualunque sia l'elemento) in un documento HTML su cui ho fatto clic. Sto usando:

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

Ma molto stranamente, ottengo il testo dell'intero documento (!), Non l'elemento cliccato.

Come ottenere solo l'elemento su cui ho cliccato?

Esempio

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

Se clicco sul testo "test", vorrei poter leggere l'attributo con $(this).attr("myclass") in jQuery.

— user1145216
fonte

2

La funzione del gestore viene eseguita nell'ambito dell'elemento a cui viene aggiunta, qui il documento. Dovrai ottenere la targetproprietà dell'oggetto evento.

— Bergi,

238

È necessario utilizzare event.targetquale è l'elemento che ha originariamente attivato l'evento. Il thiscodice nel tuo esempio si riferisce a document.

In jQuery, questo è ...

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

Senza jQuery ...

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

Inoltre, assicurati di dover supportare <IE9 che usi attachEvent()invece di addEventListener().

— alex
fonte

1

Ho scoperto che l'elemento che era di ritorno era leggermente diverso in qualche modo, quindi non if(event.target === myjQueryDivElement)potevo fare che dovevo fare: if(event.target.hasClass('mydivclass'))dove mydivclass era una classe che aveva il mio elemento.

— Redfox05

Ho cercato un lavoro in Safari per 3 giorni e alla fine mi sono imbattuto in questo post. Ragazzi, grazie rock

— Raymond Feliciano,

3

@alex hey, dovrebbe essere || target.innerText?

— Jevgeni Smirnov,

30

event.target prendere il element

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

per ottenere il testo dall'elemento cliccato

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

— BHV
fonte

26

utilizzare quanto segue all'interno del tag body

<body onclick="theFunction(event)">

quindi utilizza in javascript la seguente funzione per ottenere l'ID

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

— Malek Tubaisaht
fonte

7

Puoi trovare l'elemento target in event.target:

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

Riferimenti:

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

— Peter-Paul van Gemerden
fonte

3

Usa delegatee event.target. delegatesfrutta il gorgoglio degli eventi lasciando che un elemento ascolti e gestisca gli eventi sugli elementi figlio. targetè la proprietà normalizzata jQ eventdell'oggetto che rappresenta l'oggetto da cui ha avuto origine l'evento.

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

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

— JAAulde
fonte

2

Dovrebbe essere menzionato in questo giorno ed età che on()dovrebbero essere raccomandati sopra delegate(). Inoltre, documentè probabilmente l'unica eccezione a non utilizzare delegate()/ on()poiché stanno comunque ribollendo al punto più alto di manipolazione.

— alex

Ottima scelta. Non ho eseguito l'aggiornamento al jQuery più recente nel mio lavoro quotidiano, quindi onmi viene in mente.

— JAAulde,

1

@alex, dato che gli eventi sono comunque gorgoglianti, e dato che il gestore deve funzionare indipendentemente, non è davvero un'eccezione, vero? Non è poi così diverso. Immagino delegateabbia il sovraccarico del filtro da considerare, però ...

— JAAulde,

2

So che questo post è davvero vecchio ma, per ottenere il contenuto di un elemento in riferimento al suo ID, questo è quello che vorrei fare:

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}

— Aft3rL1f3
fonte

1

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

-2

Ecco una soluzione che utilizza un selettore jQuery in modo da poter targetizzare facilmente tag di qualsiasi classe, ID, tipo ecc.

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
fonte