Hyperscript中实现Overlay外部点击关闭的方法及相关疑问

一、可行的实现方式 #

Hyperscript并没有原生的from elsewhere语法，不过可以通过监听全局点击事件并做目标判断来实现需求，同时能解决触发按钮被误判为“外部”的问题。

举个实际的代码示例：

<button _="on click toggle .hidden on #overlay">打开Overlay</button>
<div id="overlay" class="hidden" _="on load 
                          // 缓存触发按钮，避免重复查找
                          set trigger to previousElementSibling
                          // 监听全局点击
                          on click document
                            // 判断点击目标既不是Overlay本身，也不是触发按钮
                            if event.target is not me and event.target is not trigger
                              add .hidden to me
                            end
                          end">
  <!-- Overlay内容区域 -->
  <div class="overlay-content">这是Overlay内容</div>
</div>

这段代码逻辑清晰：点击触发按钮切换Overlay的显示状态；Overlay加载时缓存触发按钮，之后监听全局点击，只有当点击目标既不在Overlay内部，也不是触发按钮时，才隐藏Overlay。

二、避免性能浪费的优化 #

如果担心Overlay隐藏后仍监听全局点击造成性能消耗，可以利用Hyperscript的on show和on hide事件，只在Overlay显示时绑定监听，隐藏时解绑：

<button _="on click toggle .hidden on #overlay">打开Overlay</button>
<div id="overlay" class="hidden" _="on load 
                          set trigger to previousElementSibling
                          // 显示时绑定全局点击监听
                          on show
                            on click document
                              if event.target is not me and event.target is not trigger
                                hide me
                              end
                          end
                          // 隐藏时解绑监听
                          on hide
                            off click document
                          end">
  <div class="overlay-content">这是Overlay内容</div>
</div>

通过on show和on hide的生命周期钩子，确保只有Overlay处于显示状态时才会监听全局点击，彻底避免不必要的性能开销。

三、是否符合Hypermedia理念 #

这种实现方式完全符合Hypermedia的核心理念：

• 交互逻辑直接内联在DOM元素上，属于“自包含”的交互能力，不需要依赖外部独立脚本，符合Hypermedia通过媒体自身提供交互引导的原则
• 采用声明式写法，将交互规则和DOM结构紧密结合，和Hyperscript的设计目标一致，也契合RESTful Hypermedia的HATEOAS思想——用户（或客户端）可以通过元素本身的交互能力完成操作，无需额外的外部逻辑指引

内容的提问来源于stack exchange，提问作者wapoa