Jak uzyskać kliknięcie elementu (dla całego dokumentu)?

150

Chciałbym pobrać aktualny element (jakikolwiek to jest) w dokumencie HTML, który kliknąłem. Ja używam:

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

Ale o dziwo, dostaję tekst całego (!) Dokumentu, a nie kliknięty element.

Jak zdobyć tylko ten element, na który kliknąłem?

Przykład

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

Jeśli kliknę na tekst „test”, chciałbym móc odczytać atrybut z $(this).attr("myclass") w jQuery.

javascript jquery html dom user1145216
źródło
2
Funkcja obsługi jest wykonywana w zakresie elementu, do którego jest dodana, w tym przypadku dokumentu. Musisz uzyskać targetwłaściwość obiektu zdarzenia.
Bergi

Odpowiedzi:

238

Musisz użyć elementu, event.targetktóry jest elementem, który pierwotnie wywołał zdarzenie. W thisprzykładowym kodzie odwołuje się do document.

W jQuery to ...

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

Bez jQuery ...

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

Upewnij się również, czy potrzebujesz obsługiwać <IE9, którego używasz attachEvent()zamiast addEventListener().

Alex
źródło
1
Odkryłem, że zwracany element był w jakiś sposób nieco inny, więc nie mogłem tego zrobić if(event.target === myjQueryDivElement), musiałem to zrobić: if(event.target.hasClass('mydivclass'))gdzie mydivclass była klasą, którą miał mój element.
redfox05
Szukałem pracy w Safari od 3 dni i w końcu natknąłem się na ten post. Dziękuję wam
Raymond Feliciano
3
@alex hej, czy powinno być || target.innerText?
Jevgeni Smirnov
30

event.target aby uzyskać element

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

aby uzyskać tekst z klikniętego elementu

window.onclick = e => {
    console.log(e.target.innerText);
}
bhv
źródło
26

użyj następującego wewnątrz tagu body

<body onclick="theFunction(event)">

następnie użyj w javascript poniższej funkcji, aby uzyskać identyfikator

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

Malek Tubaisaht
źródło
3

Użyj delegatei event.target. delegatekorzysta z propagacji zdarzeń, pozwalając jednemu elementowi nasłuchiwać i obsługiwać zdarzenia dotyczące elementów potomnych. targetjest znormalizowaną przez jQ właściwość eventobiektu reprezentującego obiekt, z którego pochodzi zdarzenie.

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

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

JAAulde
źródło
2
Powinien być wymieniony w tym dniu i wieku, który on()powinien być zalecany powyżej delegate(). Ponadto documentjest prawdopodobnie jedynym wyjątkiem, aby nie używać delegate()/, on()ponieważ i tak bulgoczą do najwyższego punktu obsługi.
Alex
Dobra decyzja. Nie zaktualizowaliśmy się do najnowszej wersji jQuery w mojej codziennej pracy, więc ontracę głowę.
JAAulde
1
@alex, ponieważ zdarzenia i tak bulgoczą, a program obsługi musi działać niezależnie od tego, nie jest to wyjątek, prawda? Po prostu nie jest tak inaczej. Myślę, że delegatetrzeba wziąć pod uwagę narzuty związane z filtrowaniem ...
JAAulde,
2

Wiem, że ten post jest naprawdę stary, ale aby uzyskać zawartość elementu w odniesieniu do jego identyfikatora, zrobiłbym to:

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}
Aft3rL1f3
źródło
1 
$(document).click(function (e) {
    alert($(e.target).text());
});

źródło
-2

Oto rozwiązanie, które wykorzystuje selektor jQuery, dzięki czemu można łatwo kierować reklamy na tagi dowolnej klasy, identyfikatora, typu itp.

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
źródło