www.webdeveloper.com
Results 1 to 7 of 7

Thread: Which element was clicked?

  1. #1
    Join Date
    Jan 2003
    Posts
    628

    Which element was clicked?

    The code below is from w3schools and is supposed to show the tagname of whichever element was clicked.

    <script type="text/javascript">
    function whichElement(event)
    {
    var tname
    tname=event.srcElement.tagName
    alert("You clicked on a " + tname + " element.")
    }
    </script>
    </head>

    <body onmousedown="whichElement(event)">

    It works in IE but not in Firefox.
    What's the trick to get this to work in Firefox please. (I asked this the other day but could not get the answer to work).

  2. #2
    Join Date
    Jul 2004
    Location
    Canada, eh
    Posts
    784
    in firefox it's event.target

    w3schools is an ok reference but they seem to only code for IE
    Kids, kids... you tried your best, and you failed miserably; the lesson is: never try.

  3. #3
    Join Date
    Jan 2003
    Posts
    628
    Thanks for your answer.

    function viewdetail(ProdID,Mine,ProdNo,event)
    {
    DetailForm.ProdID.value = ProdID;
    DetailForm.Mine.value = Mine;
    DetailForm.ProdNo.value = ProdNo;
    DetailForm.action = "ProductDetail.asp";
    DetailForm.submit();
    if (document.all)
    { var rowNo = event.srcElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement .rowIndex; }
    else
    { var rowNo = event.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.row Index; }
    var table = document.getElementById('StatusTbl');
    for (i=2;i<table.rows.length;i++)
    {
    if (i == rowNo)
    { table.rows[i].cells[11].firstChild.rows[0].cells[3].innerHTML = '<span><img src="../../NewImages/MatrixPointer12x11.gif"></span>'; }
    else
    { table.rows[i].cells[11].firstChild.rows[0].cells[3].innerHTML = '&nbsp;'; }
    }
    }

    When I call this function it is done like:
    onclick="viewdetail(27,0,35,event);"

    If the last parameter in the function is event like:
    function viewdetail(ProdID,Mine,ProdNo,event)
    ... the IE bit falls over i.e. event.srcElement no longer works.

    If the last parameter in the function is removed like:
    function viewdetail(ProdID,Mine,ProdNo)
    ... the IE bit works i.e. event.srcElement now works.

    So for Firefox and IE do I have to have two completely separate functions? because IE does not like having 'event' passed to a function as a parameter and Firefox insists on it?

    Also, from what I read 'rowIndex' is part of the DOM but in Firefox it does not seem to get a value for it?!
    Last edited by Webskater; 04-19-2005 at 02:50 AM.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    function catchEventObject(e){
    if(!e){//IE
    obj = event.srcElement
    }
    else{//Moz
    obj = e.target
    }
    }

    ...

    document.omousedown = catchEventObject;
    Last edited by Kor; 04-19-2005 at 02:55 AM.

  5. #5
    Join Date
    Oct 2004
    Posts
    1,118
    When I call this function it is done like:
    onclick="viewdetail(27,0,35,event);"

    If the last parameter in the function is event like:
    function viewdetail(ProdID,Mine,ProdNo,event)
    ... the IE bit falls over i.e. event.srcElement no longer works.
    In IE, 'event' is a global variable, and therefore it can be accessed inside any function without passing it to the function. The reason you have to put event in your function call at all is for Firefox. That might seem backwards to you if you have read that FF automatically sends the event object to an event handler function. It's true FF does automatically send the event object to an event handler function, however your function is not the event handler function. That's because when you put an event handler inside the html, js wraps your event handler function in a function wrapper, like this:

    function(){viewdetail(27,0,35)}

    So, your function isn't the event handler function--the function wrapper is the event handler function, and it is that function that FF automatically sends the event object to:

    function(event){viewdetail(27,0,35)}

    What you need to do in FF is send that event object on to your function:

    function(event){viewdetail(27, 0, 35, event)}

    Taking away the function wrapper, it looks like this:

    onclick = "viewdetail(27, 0, 35, event)"

    I don't doubt your code isn't working in IE, but it doesn't have anything to do with putting the event in the function call, as this code shows:
    Code:
    <html>
    <head><title></title>
    
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    function viewdetail(ProdID,Mine,ProdNo,event)
    {
    	var nl = "\n";
    	alert(ProdID + nl + Mine + nl + ProdNo + nl + event.srcElement.tagName);
    }
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div name="myDiv" onclick="viewdetail(1, 2, 3, event)">click me</div>
    
    </body>
    </html>
    
    output:
    1
    2
    3
    DIV
    Maybe your code isn't working because 'tagName' is not the same as the 'name'??
    Last edited by 7stud; 04-19-2005 at 03:49 AM.

  6. #6
    Join Date
    Jan 2003
    Posts
    628
    Thanks for your help. Got it now.

  7. #7
    Join Date
    Aug 2004
    Location
    Edinburgh
    Posts
    244
    Quote Originally Posted by HaganeNoKokoro
    w3schools is an ok reference but they seem to only code for IE
    that's coz it's way way out of date.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles