...

View Full Version : cross browser event.srcElement



subhailc
08-14-2005, 03: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:

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, 03: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:

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

subhailc
08-14-2005, 03: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, 03:54 PM
dumpfi is right, this is a test using the same principles.



<!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-15-2005, 12:22 AM
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:



<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:
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-15-2005, 12:44 AM
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.



<!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-15-2005, 12:50 AM
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, 01: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, 01: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, 01:56 AM
it looks almost as if NN/moz supply the event as the first argument - is that right?

subhailc
08-15-2005, 02:22 AM
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, 02: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:


<!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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum