JavaScript：滑动操作模式实现答案

【问题标题】：JavaScript: Swipe for Action Pattern ImplementationJavaScript：滑动操作模式实现
【发布时间】：2013-12-25 19:56:38
【问题描述】：

我已经使用 JavaScript 和 CSS 动画/过渡在我的移动 Web 应用程序 (PhoneGap) 中实现了Swipe for Action Android 模式。

但是，我仍然无法理解一件事。

我希望，一旦操作菜单完全显示并且用户单击操作菜单之外的任何位置（图中标记为 3），菜单应该缩回并显示原始项目（图中标记为 1）。

在桌面应用程序中，可以“捕获焦点”并执行转换回lostfocus 中的 (1)。

lostfocus 事件的 JS 等价物是什么。我看到了 onfocus 和 onblur 事件，但从我读到的内容来看，它确实是针对需要关注的事情的；比如输入、文本区域等。

除了在页面中所有其他元素的touchend 中添加一些代码并明确强制撤回打开的操作之外，我还能如何捕获我感兴趣的事件？

【问题讨论】：

【解决方案1】：

我想你自己已经给出了答案。 focus 和 blur 是用于此的事件，它们不专门用于输入元素，如您在此处所见 [1]。我什至在图层用例中手动触发focus 事件：图层打开，我想捕获ESC 的按键以关闭图层。为此，我需要将焦点设置在图层上，否则我的事件处理程序不会触发。

要捕获外部点击，您只需在跨越整个屏幕的元素上注册pointerUp 或click 事件（它必须像body 元素一样真正覆盖整个屏幕）。由于事件冒泡，只要没有其他内容捕获并取消它，处理程序就会触发。

【讨论】：