216

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.

Improve this question
1
  • 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
    Commented Jan 26, 2012 at 0:45

10 Answers 10

Reset to default
330

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().

Improve this answer
3
  • 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
    Commented Dec 1, 2014 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
    Commented Jan 8, 2016 at 17:38
  • 5
    @alex hey, should it be || target.innerText?
    – Jevgeni Smirnov
    Commented Sep 14, 2018 at 13:00
81

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);
}
Improve this answer
4
  • I came here for the right click, so I tried RightClick, but it did not work.
    – Green
    Commented Apr 1, 2021 at 16:52
  • 2
    For right click - instead of onclick add oncontextmenu
    – bhv
    Commented Jul 31, 2021 at 7:05
  • e.target returns the child click element. If a button has a child, you will not get the button, but the clicked child.
    – Loenix
    Commented Sep 18, 2021 at 11:29
  • If not, only the body tag will return in most cases
    – bhv
    Commented Sep 22, 2021 at 14:41
36

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

Improve this answer
12

You can find the target element in event.target:

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

References:

Improve this answer
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/

Improve this answer
3
  • 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
    Commented Jan 26, 2012 at 1:01
  • Good call. We've not upgraded to the most recent jQuery at my day job, so on slips my mind.
    – JAAulde
    Commented Jan 26, 2012 at 1: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
    Commented Jan 26, 2012 at 1: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);
}
Improve this answer
2

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

window.addEventListener('click', (e) => console.log(e.target));
Improve this answer
1
  • concise solution!
    – austingae
    Commented May 24, 2022 at 6:44
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>

Improve this answer
0 
$(document).click(function (e) {
    alert($(e.target).text());
});
Improve this answer
-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 );
});
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.