Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post

    cross browser event.srcElement

    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.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    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

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #4
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #6
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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
    Last edited by martin_narg; 08-15-2005 at 01:08 AM.
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #7
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #8
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #9
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #10
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    it looks almost as if NN/moz supply the event as the first argument - is that right?

  • #11
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    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

  • #12
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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
    Last edited by martin_narg; 08-15-2005 at 03:06 AM.
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •