Finding out which element exactly was clicked

Question

I am trying to test which parts of a page are clicked. Is there a jQuery function that can show the path of the element that is being clicked? I have searched Google but have not come across anything that has worked for me. Is event.target.className correct to use for this?

Code:

   <script type="text/javascript">
    $(document).ready(function() {
        $("body").click(function(event) {
            window.alert("clicked: " + event.target.nodeName);
        });
    });
    </script>

And how does your code look like? have you have an argument called event? — voigtan, Aug 13 '13 at 04:41
Are you after a specific attribute of the clicked element? Or just which element? If so... `this`? — ethorn10, Aug 13 '13 at 04:42

score 3 · Answer 1 · edited May 23 '17 at 10:31

3

This may be help you :

<script> 
  document.onclick = function(evt) {
    var evt=window.event || evt; // window.event for IE
    if (!evt.target) evt.target=evt.srcElement; // extend target property for IE
    alert(evt.target); // target is clicked
  }
</script>

This link also be helpfull

edited May 23 '17 at 10:31

Community

1
1

answered Aug 13 '13 at 04:42

Butani Vijay

4,181
2
29
61

as the OP is using jQuery, evt.target is enough. – Christophe Aug 13 '13 at 05:07

score 2 · Accepted Answer · answered Aug 13 '13 at 04:42

2

The DOM element that was clicked is simply event.target.

answered Aug 13 '13 at 04:42

Christophe

27,383
28
97
140

Is there a way to get the full path of that DOM element? – three3 Aug 13 '13 at 04:44
you can use $(event.target).parents() to get all the element's ancestors. What is your objective? – Christophe Aug 13 '13 at 04:47
I have updated my posting with some code. This works for me, but on shows me `span` for example. Is there a way to get the full path that leads to that particular `span`? – three3 Aug 13 '13 at 04:50
Could you show an example of what you call the "full path"? Does it just include node names, or are you also looking for class names and ids? btw the title of your question is a little bit misleading... – Christophe Aug 13 '13 at 04:54
Node names, class names, and ids. – three3 Aug 13 '13 at 04:55
1

[Refer This link](http://stackoverflow.com/questions/748842/how-to-get-all-element-parents-using-jquery) @three3 – Butani Vijay Aug 13 '13 at 04:56

Optimus Prime · Answer 3 · 2013-08-13T05:12:04.267

0

If you are looking for the element, its just event.target, selected as $(event.target) in jQuery,

If looking for clicked element's class,

Yes event.target.className is valid,

If you want other functions in jQuery,

You may try,

$(event.target).attr('class');

OR

$(event.target).prop("class");

Edit after comments

To get all the parents listed,

get all the parents, and add their node name to a variable,

var a = "";
a += event.target.nodeName;
$(event.target).parents().each(function(){
     a += " < "+$(this)[0].nodeName;
});
alert(a);

JSFIDDLE DEMO

edited Aug 13 '13 at 05:12

answered Aug 13 '13 at 04:43

Optimus Prime

6,817
5
32
60

Is there a way to get the full path of that DOM element? – three3 Aug 13 '13 at 04:46
If you mean selecting the element in jquery, `$(event.target)` selects the element. If not, I didn't get what you mean by full path. – Optimus Prime Aug 13 '13 at 04:48
I have updated my posting with some code. This works for me, but on shows me `span` for example. Is there a way to get the full path that leads to that particular `span`? – three3 Aug 13 '13 at 04:52
Full path, you mean listing all the parents starting from body? – Optimus Prime Aug 13 '13 at 04:56
@OptimusPrime your > should actually be – Christophe Aug 13 '13 at 05:08

score 0 · Answer 4 · answered Aug 13 '13 at 04:47

0

Seems to me like

$(document).click(function(event){
    console.log($(event.target).attr('class'));
});

would work fine. It would probably be better to use id's though. In that case, the syntax is a little more efficient

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

answered Aug 13 '13 at 04:47

buck54321

847
9
21

I have updated my posting with some code. This works for me, but on shows me `span` for example. Is there a way to get the full path that leads to that particular `span`? – three3 Aug 13 '13 at 04:53

Finding out which element exactly was clicked

4 Answers4