Javascript 如果未单击任何GUI元素，则处理onclick事件

为了更清楚地说明我需要做什么，下面是我正在使用的搜索表单/HTML页面的结构：

  ---
  |A|
  ---

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

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

框

A

、

B

、

C

是用户可以单击的按钮。

X

是显示搜索结果的内容

此时，框的行为如下所示：

• 单击

  A

  返回上一站点（=返回按钮）
• 单击

  B

  和

  C

  应用过滤器并提交表单（=检索搜索结果集）
• 单击

  X

  不执行任何操作-此处显示搜索结果

这一切都很好

---

我的新要求是：

当用户单击“其他任何内容”，然后单击

A

、

B

、

C

或

X

时，内容区域会显示一条帮助消息。

正如您可以想象的那样，这些框的HTML是完全不同和嵌套的，只有相同类型（=相同字母）的框共享一个CSS类

例如<代码>C如下所示：

---

我对如何实现这一点的第一个想法是：

• 将onclick侦听器附加到document.body
• 检查event.target是否为

  A

  、

  B

  、

  C

  或

  X

  或包含在其中任何一个中
• 如果没有，则表示用户没有单击GUI元素，并显示帮助消息

通过将公共CSS类（

gui元素

）附加到所有gui元素，文档onclick事件处理程序只检查事件目标是否具有此公共类，可以使这变得更容易

缺点是如果有任何新元素e。g

D

是在HTML中引入的，它也必须有这个CSS类

您认为上述方法是好的还是有更“优雅”的方法

编辑：

还有一些细节：

• 我使用YUI2作为javascript框架
• 我知道出现在点击上的帮助信息的整个想法可能…嗯，很烦人，但我必须按照别人告诉我的去做，对不起

---

我同意您的第一个想法，因为它更易于维护（至少对我来说）

您可以为主体或某个超级元素添加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
}

---

但请确保在不同的浏览器中进行一些测试，以确保其正常工作：请不要这样做。我们中的一些人是强制性的点击者，在阅读时随机点击和/或选择。如果你想要一个帮助系统，把一个叫做“帮助”的按钮放在某个地方。呵呵，如果这是我的决定，我不会这么做。但这不是我的公司，所以我必须照我说的去做但这不会是一个网络应用，它将在触摸屏上运行。