How to get caller element using JavaScript?

I have a table with id “tbl” and it has 2 rows and 3 cols. Each cell (td) has an explicitly defined id. Also, the table has an onclick event that calls a function foo(). The onclick() would be generated whenever any cell is clicked. The table tag is:

< table id="tbl" width="80%" height="20%" onclick="javascript: foo()" >

I also tried javascript:foo(this)

I want to find out the id of the table cell that was clicked.

I have tried the following JavaScript:

function foo(e)
{
    var sender = (e && e.target) || (window.event && window.event.srcElement);
    alert("Sender" + sender.id);
}

This works great in Google Chrome and IE, but not in Firefox. In Firefox, sender is undefined. How to get the caller cell in Firefox?

Answer

Firstly, remove javascript: from the onclick attribute. You’re confusing this with javascript in the href attribute of a link. In Javascript code, javascript: would create a label named “javascript”.

Other than that, foo(event) should work correctly with your final JavaScript code sample. The reason it doesn’t work in Firefox but does in Chrome and IE is; they both support the global event object, window.event (which is evaluated when your e.target yields undefined, because this is an element which will not have a target property). Firefox doesn’t support the global event object.

Further reading:

• https://developer.mozilla.org/en/DOM:event