Click here to Skip to main content
15,918,109 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a like below

HTML
<td>
<span class="class1"><a> Add </a></span>
<span class="class2"><a> Edit</a></span>
</td>


I have to find out on which span i have hovered and i want to get the class name

Any help Appreciated

What I have tried:

i have tried with e.target, but i am getting the td only
Posted
Updated 28-Feb-20 7:55am

1 solution

Event.target[^] returns the element which triggered the event. If your mouse is over one of the <a> tags, then that will be the target.

Event.currentTarget[^] returns the element to which the handler was attached. If you attached an event handler to the <td> element, then currentTarget would always return the <td> element, even if your mouse was over a child element.

The target will never return the <span>, since there's no way for the mouse to be over the <span> without also being over an <a>.

Instead, you will need to use the target property to get the <a>, and walk up the DOM tree until you find the <span>.

For example, using jQuery:
JavaScript
$(document).on("mouseover", "td", function(e){
    var className = $(e.target).closest("span").prop("class");
    ...
});
Demo[^]
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900