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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    49
    Thanks
    2
    Thanked 0 Times in 0 Posts

    nodeName onclick function

    Hi,

    I am trying to get an alert box to appear when a click occurs in the body of my page.

    My script looks like this..

    <script type="text/javascript">
    function findElement() {
    alert(evt.srcElement.nodeName);
    }
    </script>


    The body tag looks like this....

    <body onclick="findElement(evt);">

    I bascially have some paragraphs, headings etc and want the alert box to show what type they are via the nodeName.

    Have I passed the arguement correctly? I do not know if I need to use evt or event?

    It should be simple for you guys/gals, I am just struggling a bit. The alert box I know needs just one statement like I have, but it needs to be changed about a bit.

    Any help is great, ta!

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You don't need to send window.event as an argument in IE, but do need to use the object name (event) to get properties of it:
    onclick="findElement()" function findElement(){alert(event.srcElement.nodeName)}

    If you are sending it as an argument, then it could be something like:
    onclick="findElement(event)" function findElement(evt){alert((evt.srcElement || evt.target).nodeName)}
    *this message will self destruct in n-seconds*

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    For standards compliant browsers
    Code:
    document.getElementsByTagName("body")[0].addEventListener("click",showNodeName,true);
    
    function showNodeName(e)
    {
    	alert(e.currentTarget.nodeName);
    }

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In that case, currentTarget might always return BODY.
    *this message will self destruct in n-seconds*

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    currentTarget has no equivalent property in IE, and anyway it's not what you want - the event target is what you want

    codegoboom's code is essentially right, but it would throw strict compilation warnings ( ) and anyway ... binding it to body is not the best way; be much simpler to add a document click handler, so that any click anywhere on the page you can retrieve the target element.

    Try something like this, all in an external .js file, no need for event handling attributes:
    Code:
    //bind window onload handler
    window.onload = function()
    {
    	//bind a document click handler
    	document.onclick = function(e)
    	{
    		//for most browsers, "e" is the event argument
    		//but ie has a global "event" object, with different names for most properties
    		//the easiest way to deal with this is to convert ie's references, so:
    		//if e is not recognised, store event object to it
    		//and then convert the event target reference 
    		if(!e) { e = window.event; e.target = e.srcElement; }
    		
    		//now we have the event target element
    		alert(e.target);
    	};
    };
    Last edited by brothercake; 01-13-2005 at 11:54 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

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