Question

Let me explain this scenario:
I have a JSP having a table whose source code is not available to me.
Inside the table’s <TD> tag, however I can dynamically insert a anchor tag using Java codes:

String html =
 "<a href=\"javascript:showReleaseVersionsPopUp('" + currentRow.getComponentSeq() + "'); \" class=\"windowletIcon\">" +
                "<img src=\"./images/information-button.png\" width='25' height='20' id='img_"+currentRow.getComponentSeq()+"' " +
                        />" +
 "</a>";
return html;

Now what I want is, if a mouse enter’s this Anchor tag, it goes to Javascript showReleaseVersionsPopUp() and shows a hidden DIV, however on mouseout event on this Anchor tag, I don’t want it to go to Javascript hideReleaseVersionsPopUp() and hide the DIV. I rather want that Javascript hideReleaseVersionsPopUp() should be called on mouseout event on the Parent <TD> tag of this Anchor tag.

I believe to do this first I will need set a mouseout event handler on the Anchor tag and stop the event from bubbling and then set the event handler on it’s parent <TD> tag.

However, to reiterate here, I don’t have access to the JSP code and the <TABLE> code, so all I can do is through the Java code mentioned above.

Any suggestion appreciated.

Answer 1

You can attach a event handler to the onmouseout event of the parent node.

var el = document.getElementById('idOfAnchor').parentNode;

if (el.addEventListener) {

  el.addEventListener('mouseout', hideReleaseVersionsPopUp ); 

} else if (el.attachEvent)  { // for IE8 and previous versions

  el.attachEvent('mouseout', hideReleaseVersionsPopUp );

}