212

I would like to get the current element (whatever element that is) in an HTML document that I clicked. I am using:

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

But very strangely, I get the text of the whole(!) document, not the clicked element.

How to get only the element I clicked on?

Example

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

If I click on the "test" text, I would like to be able to read the attribute with $(this).attr("myclass") in jQuery.

Community
  • 1
  • 1
user1145216
  • 2,434
  • 3
  • 15
  • 14
  • 2
    The handler function executes in the scope of the element it is added to, here the document. You will need to get the `target` property of the event object. – Bergi Jan 26 '12 at 00:45

10 Answers10

324

You need to use the event.target which is the element which originally triggered the event. The this in your example code refers to document.

In jQuery, that's...

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

Without jQuery...

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

Also, ensure if you need to support < IE9 that you use attachEvent() instead of addEventListener().

alex
  • 479,566
  • 201
  • 878
  • 984
  • 1
    I found that the element that was return was slightly different somehow, so I couldnt do `if(event.target === myjQueryDivElement)` I had to do: `if(event.target.hasClass('mydivclass'))` where mydivclass was a class that my element had. – redfox05 Dec 01 '14 at 17:51
  • I have been looking for a work around in Safari for 3 days and I finally stumbled upon this post. You guys rock thanks – Raymond Feliciano Jan 08 '16 at 17:38
  • 5
    @alex hey, should it be `|| target.innerText`? – Jevgeni Smirnov Sep 14 '18 at 13:00
78

event.target to get the element

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

to get the text from clicked element

window.onclick = e => {
    console.log(e.target.innerText);
}
bhv
  • 5,188
  • 3
  • 35
  • 44
35

use the following inside the body tag

<body onclick="theFunction(event)">

then use in javascript the following function to get the ID

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

Malek Tubaisaht
  • 1,170
  • 14
  • 16
12

You can find the target element in event.target:

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

References:

Peter-Paul van Gemerden
  • 6,921
  • 30
  • 37
4

Use delegate and event.target. delegate takes advantage of the event bubbling by letting one element listen for, and handle, events on child elements. target is the jQ-normalized property of the event object representing the object from which the event originated.

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

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

JAAulde
  • 19,250
  • 5
  • 52
  • 63
  • 3
    Should be mentioned in this day and age that `on()` should be recommended over `delegate()`. Also, `document` is probably the only exception to not use `delegate()`/`on()` as they are bubbling to the highest point of handling anyway. – alex Jan 26 '12 at 01:01
  • Good call. We've not upgraded to the most recent jQuery at my day job, so `on` slips my mind. – JAAulde Jan 26 '12 at 01:11
  • 1
    @alex, since the events are bubbling anyway, and since the handler has to run regardless, it's not really an exception is it? It's just not that different is all. I guess `delegate` does have the filtering overhead to consider, though... – JAAulde Jan 26 '12 at 01:58
3

I know this post is really old but, to get the contents of an element in reference to its ID, this is what I would do:

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}
סטנלי גרונן
  • 2,917
  • 23
  • 46
  • 68
JΛYDΞV
  • 8,532
  • 3
  • 51
  • 77
2

This is the esiest way to get clicked element in javascript.

window.addEventListener('click', (e) => console.log(e.target));
Abu Talha
  • 74
  • 5
1

pass "this" as argument when you call the function:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<span onclick="click_here(this);">clicked</span>
<script>
function click_here(elmnt){
alert($(elmnt).text());
}
</script>
AhmdAzza
  • 301
  • 3
  • 6
0
$(document).click(function (e) {
    alert($(e.target).text());
});
-2

Here's a solution that uses a jQuery selector so you can easily target tags of any class, 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
  • 1