Detecting Mouse Clicks

The remaining part of the code is essentially made up of three DHTML functions. The first, engage(), must determine the name of the layer on which the click was detected. In fact, the click could only occur on our cursor.

• In the case of Internet Explorer, things are easier: we just need to use the window.event.srcElement object. A simple test will show us whether or not the layer called curseur is concerned (lines 79 and 80).
  
  
• With Navigator, we must test the coordinates of the mouse and those of each layer.
  
  
The position of the mouse is stored in the pageX and pageY variables. As for the layers, we must read the .left, .top, .width and .height properties of the layer objects that are stored in the document.layers[] array. Then all we need to do is to compare them with pageX and pageY.

The function used to check where the click occurred is setSelectedElem(). It is called up from the engage() function and assigns the string "curseur" to the selectedObj variable if the click occurred on the cursor, and the value null if the opposite occurs.

Then, if selectedObj does not equal the value null, we compute the coordinates of the click and store them in the offsetX and offsetY variables. We then have to call up the dragIt() function that handles the moving of the various layers.