JavaScript and Frames, Part II: Handling Mouse Clicks - | WebReference

JavaScript and Frames, Part II: Handling Mouse Clicks -

JavaScript and Frames, Part II (5)

Handling Mouse Clicks

We put an event handler for mouse clicks in the bottom frame:

  <A HREF="javascript:void(0)" onClick="handleClick()"><IMG SRC="doc.gif"
       WIDTH="50" HEIGHT="50" BORDER="0"></A>

The event handler handleClick() is defined via a function that is included in the top frame:

function handleClick() {

The findClickedBox() function (included in the top frame) finds which frame had been clicked:

function findClickedBox(boxObject) {
 for (var i = 0; i < dim1; i++) {
  for (var j = 0; j < dim2; j++) {
   if (boxObject == top.frames[i].frames[j]) {
     rowFound = j;
     colFound = i;
     if (blockClicking == false)
     if (top.frames[i].frames[j].document.images[0].src.indexOf(blank) == -1)
       revealBox(rowFound, colFound);

We pass the self object from the lowest frame to the top frame. The self object is like an ID by which we can identify the clicked box. We go over all 64 frames and check for equality between their frame objects and the object passed from the clicked box. Once we determine the clicked frame, we set the rowFound and colFound variables. We then check that clicking is allowed (blockClicking is false) and that the card is not removed (image is blank). If all conditions above are satisfied, we reveal the box:

            revealBox(rowFound, colFound);

Created: April 5, 1999
Revised: February 3, 2000