html - How to get caller element using JavaScript? - Stack Overflow

admin管理员组

文章数量:1291083

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?

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?

• javascript
• html
• dom-events

Share Improve this question Follow edited Sep 5, 2022 at 21:12 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 8, 2010 at 21:32 Saurabh ManchandaSaurabh Manchanda 1,12511 gold badge99 silver badges2121 bronze badges 9

• 2 @drachenstern: I think force-feeding jQuery is going a bit too far. All the popular frameworks handle browser differences. jQuery is my favourite too, but I think "why aren't you using a framework?" is a more unbiased question to ask. – Andy E Commented Jun 8, 2010 at 21:42
• 2 @drachenstern: Shouldn't I be good with Javascript before trying JQuery ? – Saurabh Manchanda Commented Jun 8, 2010 at 21:47
• 1 @wacky_coder ~ not for something like this, because there's a difference between learning how to enpass all browser quirks and learning how to write code to do things in javascript. I use the framework to handle the quirks and the nitty gritty, and I write the functional parts myself. Same as I do with C#. I don't try and figure how to read the filesystem, I use the .NET framework to do that for me, and I write code to do the functional part. I can extend that analogy to many things, for instance Lists. But you're correct, you should know WHY it works like it does, as your code shows. +1 – jcolebrand Commented Jun 8, 2010 at 21:59
• 1 @wacky_coder ~ I want to point this out, just to be clear: I'm not against roll your own, especially for something simple like this, because I started writing JS long before I learnt jQuery, but I seemed to always get caught up in the tedium of remembering to check everything for each browser. If you don't goto a framework, at least write your own pseudoframework, so you don't have to handle cross-browser differences in every function. That's the biggest benefit to a framework. Yes there's plugins, so those are fun, but those aren't the reason I switched to framework js code... – jcolebrand Commented Jun 8, 2010 at 22:03
• 1 @drachenstern : Even I use the .NET framework for most of the work. It handles all the pain I would have been required to take in but sometimes, one has to write code without using the facilities provided by the framework. That's when I have to dive in! – Saurabh Manchanda Commented Jun 8, 2010 at 22:09

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 5

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/en/DOM:event

本文标签： htmlHow to get caller element using JavaScriptStack Overflow