"点击任何地方关闭"的原型最佳实践？

Question

我经常发现自己经常在网页中打开一个元素 - 例如一个下拉菜单 - 如果用户点击页面上除元素本身之外的任何地方,我想关闭它.

为了简单起见,我主要编写代码而不是使用一些下拉菜单类.

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

是否有基于原型,权威的最佳实践来做到这一点？跨浏览器的东西 - IE6是一个加号但不是一个要求？

只是这个:

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

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

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();
});

您还可以将特定的类添加到您不想触发关闭操作的项目并在里面进行检查

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