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>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.
9 Answers
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().
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); } 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);} You can find the target element in event.target:
$(document).click(function(event) { console.log($(event.target).text()); }); References:
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 }); 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); } This is the esiest way to get clicked element in javascript.
window.addEventListener('click', (e) => console.log(e.target)); $(document).click(function (e) { alert($(e.target).text()); }); 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 ); }); 
