javascript - "click anywhere to close"的原型(prototype)最佳实践？

Question

我发现自己经常处于打开网页中的元素的情况 - 例如一个下拉菜单 - 如果用户点击页面上除了元素本身以外的任何地方，我想关闭它。

为简单起见，大部分代码都是我自己编写的，而不是使用一些下拉菜单类。

但是，我从来没有设法构建一个完全令人满意的实现:事件处理和冒泡在不同的浏览器中会以不同的方式工作，需要一些讨厌的解决方法，在某些情况下单击下拉按钮会在同一时刻开始关闭它，依此类推。

是否有基于原型(prototype)的权威最佳实践来执行此操作？跨浏览器工作的东西 - IE6 是一个加号但不是必需的？

就是这样:

• 点击按钮 - 打开一个元素(例如，绝对定位的下拉菜单)。
• 在元素内单击 - 元素保持打开状态。
• 单击打开元素的按钮t - 元素保持打开状态。
• 点击页面上的其他任何地方 - 元素关闭。

我只需要事件处理部分的帮助，菜单的显示完全是次要的。

Answer 1

Event.observe(document, 'click', function (event) {
  switch (event.element().id) {
    case 'example_id':
      // do different stuff depending on element clicked
      // ofc u don't need to pass id, u can simply throw an element itself
      break;
    default:
      // do close action
      break;
  }
  // also check Event.findElement();
});

你也可以给不想触发关闭 Action 的item添加特定的类，勾选在里面

if (!event.element().hasClassName('dont_close'))   
  Element.remove(selectDOMElement);