cross browser event.srcElement

subhailc · 08-14-2005, 02:02 PM

hi - i seem unable to return the element that fired an event in moz or nn. the last 3 hours googling have yielded the same basic answer:

Code:

function returnself() { return window.event.srcElement || window.event.target;}

i've tried that and a variety of permutions with no success.

dumpfi · 08-14-2005, 02:20 PM

The window.event object is proprietary and IE-only.

Non-IE-browsers pass the event object as the first parameter to the event function.

Use something like:

Code:

function returnself(e) {
    if(e == null) e = window.event;
   return (typeof e.target != 'undefined') ? e.target : e.srcElement;
}

dumpfi

subhailc · 08-14-2005, 02:29 PM

thanks for the quick reply dumfi - does the sample you posted work for you? i noticed the verbiage 'something like..' so i'm not sure if it should, but it's not for me - if it does work for you then i must have something screwy in my settings for both the failing browsers... either way, it'll be a comfort to know.

martin_narg · 08-14-2005, 02:54 PM

dumpfi is right, this is a test using the same principles.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function getClickTarget(e) {
	e = e || window.event;
	alert(e.target || e.srcElement);
}

window.onload = function() {
	document.getElementById("myP").onclick = getClickTarget;
	document.getElementById("mySpan").onclick = getClickTarget;
	document.getElementById("myDiv").onclick = getClickTarget;
}
</script>
</head>

<body>
<p id="myP">paragraph id myP</p>
<span id="mySpan">span id mySpan</span>
<div id="myDiv">div id myDiv</div>
</body>
</html>

hope this helps

m_n

subhailc · 08-14-2005, 11:22 PM

thanks to you too martin. your script works, yet im still finding this surprising difficult - if i amend your example to return the element, i fail - or if i take the event handlers from the onload and add them inline, i fail. probably doing something terrifically obvious, but i'm making no progress at this point. here's what i tried from your and dumfi's examples:

Code:

<html>

<head>
<script type="text/javascript">

function getself1(e) {
var e = e || window.event;
return e.target || e.srcElement;}

function getself2(e) {
if(e==null) var e=window.event;
return typeof(e.target) != 'undefined' ? e.target : e.srcElement;}

function getself3(e) {
if(e==null) var e=window.event;
return e.target || e.srcElement;}

function getself4(e) {
var e = e || window.event;
return typeof(e.target) != 'undefined' ? e.target : e.srcElement;}

function test(a) {alert(a.tagName);}

</script>
</head>

<body>

<input type="button" onclick="test(getself1())" value="click" />
<input type="button" onclick="test(getself2())" value="click" />
<input type="button" onclick="test(getself3())" value="click" />
<input type="button" onclick="test(getself4())" value="click" />

</body>
</html>

for reference, here's the actual bit this problem applies to:

Code:

function el(a) { var e = e || window.event; return !a ? event.srcElement || e.target : !isNaN(a) ? /* ommitted for clarity - unrelated to problem */ : document.getElementById(a) || document.all(b); }

thanks both for your help so far and in advance.

martin_narg · 08-14-2005, 11:44 PM

By the looks of things, just passing the object would be way easier for you. Here's a lean and clean example using the this keyword.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function clickHandle(obj) {
	alert(obj);
}
</script>
</head>

<body>
<form name="frm">
<input type="button" onclick="clickHandle(this);" value="click"><br>
<input type="button" onclick="clickHandle(this);" value="click"><br>
<input type="button" onclick="clickHandle(this);" value="click"><br>
<input type="button" onclick="clickHandle(this);" value="click">
</form>
</body>
</html>

m_n

subhailc · 08-14-2005, 11:50 PM

unfortunately its not that easy; and of course the problem is only with NN and Moz. i'd have thought that a basic mechanic such as this wouldnt be so onerous to put into application. is there not standardized or at least largely agreed upon cross-browser method for returning the element that fired an event? thanks again.

martin_narg · 08-15-2005, 12:06 AM

Hi mate, i've minorly updated my previous post (just added form tags actually). This script works in Netscape 4+, IE 3+, all versions of Opera, Safari, Konqueror and Mozilla Firefox. Essentially this is totally cross-browser compatible.

Could you post up your script to see where things might be having a problem?

Cheers

m_n

subhailc · 08-15-2005, 12:51 AM

in my post at 03:22 i included samples of how i'd tried to get both scriptlets to take. all i'm really looking for is the gecko equivalent to event.srcElement. a function, a scriptlet, whatever that returns the event instantiating the event would be terrific. dumfi's example's perfect - the barest script to return the firing element - except that (for me) it's not yeilding a return in NN or Moz. as an aside, everything weve posted or talked about works fine in IE, it's only the geckos that are giving me trouble.

short answer: what would be most helpful is a working version of dumfi's example.

subhailc · 08-15-2005, 12:56 AM

it looks almost as if NN/moz supply the event as the first argument - is that right?

subhailc · 08-15-2005, 01:22 AM

Quote:

Originally Posted by dumpfi

Non-IE-browsers pass the event object as the first parameter to the event function.

i should have paid more attention. tx

martin_narg · 08-15-2005, 01:50 AM

this is an example of the two ways described. Both achieve the same result, just going about it differently. Both are cross-browser. Your main problem in your previous postings was not to pass the event object correctly. This is not needed for the first button here which uses the this keyword. This is because of the Object Oriented (OO) structure of javascript with function objects that are part of an element object holding a reference to their parent. The second button uses the event object which in gecko doms is bolted onto the html element object (as oppose to being bolted onto the window object like IE does).

So essentially by using the this keyword, you use inbuilt functionality to do what you require, rather than manually writing the cross-DOM way via the event object - ie the second button.

I've also included the way to pass the event object as an argument from within a nested function.

Example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function test(obj) {
	alert(obj); // alerts the html element object passed
}

function clickHandler(e) {
	return (window.event) ? window.event.srcElement : e.target;
}
</script>
</head>

<body>
<form name="frm">
<input type="button" name="btn" value="click me 1" onclick="test(this);">&nbsp;
<input type="button" name="btn" value="click me 2" onclick="test(clickHandler(event));">
</form>
</body>
</html>

Hope this helps

m_n