Question

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

  ---
  |A|
  ---

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

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

框A，B，C是可以被用户点击的按钮。
X是显示搜索结果的内容。

这些盒子就像这样：

点击A返回上一个网站（=后退按钮）
点击B和C应用过滤器并提交表单（=检索搜索结果集）
点击X不执行任何操作 - 此处显示的搜索结果

这一切都很好。

我的新要求是：

当用户点击“其他任何内容”，然后A，B，C或X时，内容区域会显示帮助消息。

可以想象，框的HTML是完全不同的并且是嵌套的，只有相同类型（=相同字母）的框共享一个CSS类。

电子。 G。 C看起来像这样：

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

将onclick侦听器附加到document.body
检查event.target是A，B，C还是X还是其中任何一个
如果没有，则用户未单击GUI元素并显示帮助消息

通过将一个公共CSS类（gui-element）附加到所有GUI元素可以使这更容易，因此文档onclick事件处理程序仅检查事件目标是否具有此公共类。

缺点是如果有任何新元素e。 G。 HTML中引入了D，它必须具有此CSS类。

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

编辑：

更多细节：

我使用YUI2作为javascript框架
我知道onclick上出现的帮助信息的整个想法可能是......呃很烦人，但是我必须做我被告知的事，抱歉

Answer 1

我会按照你的第一个想法去做，因为它会更易于维护（至少对我而言）

Answer 2

您可以为正文或某些超级元素添加一个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
}

source/tutorial on javascript event bubbling

但请确保您在不同的浏览器中进行一些测试以确保其正常工作。：d

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

2 个答案: