Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript: Get clicked element

Tags:

javascript

I need to get clicked element in function getClickedElement. How can I do this?

<html>
<head>
  <script>
    function getClickedElement () {
    }
  </script>
</head>
<body>
  <a href="javascript:alert(getClickedElement())" id="test">click me!!!</a>
</body>
</html>

I can set only href attribute. I can not set onclick event because this elements is generated by third party lib.

Thanks.

like image 906
Dumitru Avatar asked Sep 21 '10 09:09

Dumitru


3 Answers

You can't get the clicked element in a javascript: URL. The event has already finished, so there's no event.target (or window.event.srcElement for IE), and javascript: links are not invoked with this set (so you get window).

Of course if you know the link in question is id="test" you can do document.getElementById('test'), but I suspect that's rather missing the point of what you want to do.

I can set only href attribute. I can not set onclick event because this elements is generated by third party lib.

Fix or drop the lib. javascript: URLs are utter horrors that should never be used.

Can you add a <script> elsewhere in the page? If so you can inject a click event handler onto the element(s) without needing any extra markup. eg.:

for (var i= document.links.length; i-->0;)
    if (document.links[i] is one of the links you want to target)
        document.links[i].onclick= someHandlerFunction;

function someHandlerFunction() {
    alert(this);
    return false;
}

Indeed, assigning from JS (with on... or via addEventListener with attachEvent fallback for IE) is the best-practice way of adding event handlers anyway.

like image 78
bobince Avatar answered Nov 05 '22 10:11

bobince


the following statckoverflow question gives a way to detect clicked element here

$(document).click(function(event) {
    var text = $(event.target).text();
});
like image 42
user2802972 Avatar answered Nov 05 '22 09:11

user2802972


<a href="javascript:alert(getClickedElement('test'))" id="test">click me!!!</a>

<script>
function getClickedElement (id) {
    return document.getElementById(id);
}
</script>

or, if you can't predict the ID, you can use Javascript to attach events after page is loaded. Look at jQuery. Use something like $('a').click(function() {return this.id; });

like image 28
Alex Avatar answered Nov 05 '22 08:11

Alex