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

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

Answer 2

我想打开按钮在菜单中。

$('openbutton').observe('click' function(event) {
    var menu = $('openbutton').up();

    if (menu.hasClassName('collapsed')) {

        menu.removeClassName('collapsed');
        menu.addClassName('expanded');

        document.observe('click', function (event) {
            if(!event.target.descendantOf(menu)) {
                menu.addClassName('collapsed');
                menu.removeClassName('expanded');
            }
        });

    } else {
        menu.addClassName('collapsed');
        menu.removeClassName('expanded');
    }
});

Answer 3

AFAIK，你需要创建一个与窗口大小不相同的div，将它放在当前元素后面，然后添加一个click事件。

Answer 4

只是大声思考，但你可能能够使用下拉列表中的模糊事件来隐藏它（当元素失去焦点时模糊被触发）或另一个想法可能是当下拉列表打开时将点击事件附加到隐藏了落下。 事件通过其容器传播，因此最终应该最终到达文档对象。 单击下拉列表时，可能需要在事件上调用preventPropegation，以使其不会连接到附加到文档的处理程序。

Answer 5

也许你可以计算clickevent的位置（X，Y），并将其与所需容器的cumulativeOffset（cumulativeScrollOffset）+ [el.width | el.height]进行比较。

Event.observe(window, 'click', function(e) {

  var el = $('el')

  if( el.cumulativeOffset[0] < e.Event.pointerX(e) ...  )

});

<div id="el" style="position:absolute;width:100px;height:100px;background-color:#00F;top:100px;left:300px;">

</div>