Detecting Which Object Was Clicked

In Chapter 12, I showed you how to use evt to find the object in which an event originated. Using the browser's DOM, though, you can also determine the ID of the object in which the event occurred. For Internet Explorer, this entails querying the srcElement object; for W3C-compliant browsers, it means using the target object (Figures 14.1 and 14.2).

Figure 14.1. The general syntax for using an event object to find the triggering ID in Internet Explorer.

Figure 14.2. The general syntax for using an event object to find the triggering ID in W3C-compliant browsers.

In this example, (Figure 14.3), clicking any of the four objects will cause an alert to appear, displaying the ID value for the clicked element.

Figure 14.3. Pick an Alice, any Alice.

To determine the element in which the event occurred:


function findObjectID(evt) {...}

Add the function findObjectID() to the JavaScript in the head of your document (Code 14.1). This script determines the CSS element on the screen in which the event occurred and then displays an alert telling you which one it was. To do this, we'll need to adapt the event equalizer to find the target (W3C browsers) or source element (Internet Explorer) of the event, which can then be used to find the object's ID:

var objectID = ( ? : ((evt.srcElement) ? : null);

Code 14.1. The findObjectID() function will identify the object that triggered the event by using the evt object that is passed to it.

[View full width]

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " /xhtml1-strict.dtd">  <html xmlns="">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>CSS, DHTML &amp; Ajax | Detecting which Object was Clicked</title>  <script type="text/javascript">  function findObjectID(evt) {       var objectID = ( ? : ((evt.srcElement) ?  : null);       if (objectID)   {          alert('You clicked ' + objectID + '.');       }       return;  }  </script>  <style type="text/css" media="screen">  .dropBox {       text-align: right;       padding: 4px;       background-color: #FFFFFF;       border: 2px solid #f00;       cursor: pointer; }  #object1 {       position: absolute;       z-index: 3;       top: 285px; left: 315px;       background: white url(alice22a.gif) no-repeat;       height:220px; width:150px; }  #object2 {       position: absolute;       z-index: 2;       top: 210px; left: 210px;       background: white url(alice15a.gif) no-repeat;       height:264px; width:200px; }  #object3 {       position: absolute;       z-index: 1;       top: 105px; left: 105px;       background: white url(alice28a.gif) no-repeat;       height:336px; width:250px;}  #object4 {       position: absolute;       z-index: 0;       top: 5px; left: 5px;       background: white url(alice30a.gif) no-repeat;       height:408px; width:300px; }  </style>  </head>  <body>  <div   onclick="findObjectID(event)"> Object 1</div>  <div   onclick="findObjectID(event)"> Object 2</div>  <div   onclick="findObjectID(event)"> Object 3</div>  <div   onclick="findObjectID(event)"> Object 4</div>  </body></html>


#object1 {...}

Set up your CSS rules, using whatever style properties you want. I set up four images (object1, object2, object3, and alice4), each with a unique ID.



Add an event handler to trigger the function you created in Step 1, and pass to it the event object.


  • Once the object ID has been found using the evt variable, you can use that information to address the object to find its properties, as explained in the next section, or make dynamic changes, as described in Chapters 16 through 18.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: