Question

To make it more clear what I need to do, here is the structure of the search form / HTML page I am working with:

  ---
  |A|
  ---
 
 ---------   ---------   ---------
 |       |   |       |   |       |
 |   B   |   |   B   |   |   B   |
 |       |   |       |   |       |
 ---------   ---------   ---------
 
 ---------------------------------    ---------
 |                               |    |   C   |
 |                               |    ---------
 |                               |
 |               X               |    ---------
 |                               |    |   C   |
 |                               |    ---------
 |                               |
 ---------------------------------

The boxes A, B, C are buttons which can be clicked by the user.
The X is the content are where the search result will be displayed.

The boxes behave at the moment like this:

• Click on A returns to the previous site (= a back button)
• Click on B and C apply filter and submit the form (= retrieving the result set of the search)
• Click on X does nothing – the search result shown here

This works all fine and well.

---

My new requirement is:

When the user clicks "anything else" then A, B, C or X then a help message appears in the content area.

As you can imagine, the HTML of the boxes is fairly different and nested, only the boxes of the same type (= same letter) share a CSS class.

E. g. C looks like this:

---

My first thought on how to implement this was:

• Attaching an onclick listener to document.body
• Check if the event.target is A, B, C or X or contained in any of them
• If not, then the user has not clicked a GUI element and the help message is being displayed

This could be made more easy by attaching a common CSS class (gui-element) to all GUI elements so the document onclick event handler checks only if the event target has this common class.

The drawback is that if any new element e. g. D is introduced in the HTML it must have this CSS class, too.

Do you think the above approach is good or is there a more "elegant" way of doing this?

EDIT:

A few more details:

• I am using YUI2 as JavaScript framework
• I know the whole idea of the help message appearing onclick might be …uh annoying, but I have to do what I am told, sorry

Answer 1

I would go with your first thought, because it would be more maintainable (at least for me)