Jak kliknąć element (dla całego dokumentu)?

Chciałbym uzyskać bieżący element (cokolwiek to jest) w dokumencie HTML, który kliknąłem. Używam: 

$(document).click(function () {
    alert($(this).text());
});
[[3]} ale bardzo dziwnie, dostaję tekst całości (!) dokumentu, a nie klikniętego elementu.

Jak uzyskać tylko element, 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 $(this).attr("myclass") w jQuery.

Author: A-Sharabiani, 2012-01-26
Source

7 answers

Musisz użyć event.target który jest elementem, który pierwotnie wywołał zdarzenie. this w przykładowym kodzie odnosi się do document.

W jQuery...

$(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 musisz obsługiwać attachEvent() zamiast addEventListener().

 166
Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-15 18:56:07

Użyj poniższego znacznika wewnątrz body tag 

<body onclick="theFunction(event)">

Następnie użyj w javascript następującej funkcji, aby uzyskać identyfikator 

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

 13
Author: Malek Tubaisaht,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-29 14:35:48 
window.onclick = e => {
    console.log(e.target);
    console.log(e.target.tagName);
}

Aby pobrać tekst z klikniętego elementu 

window.onclick = e => {
    console.log(e.target.innerText);
}
 7
Author: bhv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-04 11:45:22

Możesz znaleźć element docelowy w event.target:

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

Bibliografia:

 5
Author: PPvG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-26 00:40:29

Użycie delegate oraz event.target. delegate wykorzystuje zjawisko bubbling, pozwalając jednemu elementowi nasłuchiwać i obsługiwać zdarzenia na elementach potomnych. target jest znormalizowaną właściwością JQ obiektu event reprezentującego obiekt, z którego Zdarzenie powstało.

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

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

 3
Author: JAAulde,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-26 01:02:28 
$(document).click(function (e) {
    alert($(e.target).text());
});
 0
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-26 00:40:34

Oto rozwiązanie, które używa selektora jQuery, dzięki czemu można łatwo kierować tagi dowolnej klasy, ID, 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 );
});
 -1
Author: Henry Lockett,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-29 07:24:21