Обработка события onclick, если не был нажат элемент GUI

Question

Чтобы было яснее, что мне нужно сделать, вот структура формы поиска / HTML-страницы, с которой я работаю:

  ---
  |A|
  ---

 ---------   ---------   ---------
 |       |   |       |   |       |
 |   B   |   |   B   |   |   B   |
 |       |   |       |   |       |
 ---------   ---------   ---------

 ---------------------------------    ---------
 |                               |    |   C   |
 |                               |    ---------
 |                               |
 |               X               |    ---------
 |                               |    |   C   |
 |                               |    ---------
 |                               |
 ---------------------------------

Поля A, B, C - это кнопки, которые могут быть нажаты пользователем.
X - это содержимое, в котором будет отображаться результат поиска.

Ящики в данный момент ведут себя так:

• Нажмите A возврат на предыдущий сайт (= кнопка возврата)
• Нажмите B и C, примените фильтр и отправьте форму (= получение набора результатов поиска)
• Клик по X ничего не делает - результат поиска показан здесь

Это работает все хорошо и хорошо.

<ч />

Мое новое требование:

Когда пользователь нажимает «что-нибудь еще», затем A, B, C или X, в области содержимого появляется сообщение справки.

Как вы можете себе представить, HTML-блоки довольно разные и вложенные, только блоки одного типа (= одна и та же буква) имеют общий класс CSS.

E. г. C выглядит так:

<ч />

Моя первая мысль о том, как это реализовать, была:

• Присоединение слушателя onclick к document.body
• Проверьте, является ли event.target A, B, C или X или содержится в каком-либо из них
• Если нет, то пользователь не щелкнул элемент GUI, и отображается сообщение справки

Эту задачу можно упростить, подключив общий класс CSS (gui-element) ко всем элементам графического интерфейса, поэтому обработчик события onclick документа проверяет, только если цель события имеет этот общий класс.

Недостатком является то, что если любой новый элемент e. г. D введен в HTML, он также должен иметь этот класс CSS.

Считаете ли вы, что вышеприведенный подход хорош или есть более "элегантный" способ сделать это?

РЕДАКТИРОВАТЬ:

Еще несколько деталей:

• Я использую YUI2 в качестве основы JavaScript
• Я знаю, что сама идея появления сообщения помощи на экране может быть ... эээ раздражающей, но я должен сделать то, что мне говорят, извините

Answer 1

Вы можете добавить обработчик onclick для тела или некоторого суперэлемента, а затем остановить распространение события при нажатии на другие элементы, чтобы оно не всплыло, и вы получите только один эффект.

function doSomething(e)
{
    //handle event
    if (!e) 
        var e = window.event;  //if ie do this
    e.cancelBubble = true;     //ie's stopPropagation method
    if (e.stopPropagation) e.stopPropagation();  //w3's stopPropagation
}

источник / учебник по пузырьковому событию JavaScript

Но убедитесь, что вы провели некоторое тестирование в другом браузере, чтобы убедиться, что он работает правильно. : D

Answer 2

Я бы пошел с вашей первой мыслью, потому что это было бы более ремонтопригодным (по крайней мере для меня)