Question

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

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

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

是否有基于原型，权威的最佳做法？跨浏览器有效的东西 - 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();
});

您还可以向不想触发关闭操作的项目添加特定类，并在

中进行检查

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

只是大声思考，但你可能能够使用下拉列表中的模糊事件来隐藏它（当元素失去焦点时模糊被触发）或者下拉开启时可能会有另一个想法将click事件附加到文档对象隐藏下拉列表。事件通过其容器传播，因此最终应该最终到达文档对象。您可能需要在单击下拉列表时对事件调用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>

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

5 个答案: