reitit.frontend - HTML5Router 不会像匹配路由那样阻止锚点点击

Question

• 如果我们选择 HTML5Router 或 Fragment 路由器 - 在这两种情况下，reitit 都应该防止默认的锚点点击行为
• 然而，这里永远不会调用忽略锚点单击函数
  • https://github.com/metosin/reitit/blob/0.5.18/modules/reitit-frontend/src/reitit/frontend/history.cljs#L109
• 因为 goog.events/listen 下面的几行缺少真正的第 4 个参数 - 所以浏览器首先捕获 click 并且永远不会到达 document.click
  • https://github.com/metosin/reitit/blob/0.5.18/modules/reitit-frontend/src/reitit/frontend/history.cljs#L124
• 是

(gevents/listen js/document goog.events.EventType.CLICK ignore-anchor-click))

• 应该 - 然后一切正常

(gevents/listen js/document goog.events.EventType.CLICK ignore-anchor-click true))

问题

• 有没有办法在没有 PR 或分叉的情况下改变这种行为？

Answer 1

解决方案

• 从 reitit.frontend.history 复制功能代码
• 使用历史记录取消订阅和重新订阅

(let [history (Yzma.frontend.easy/start! _ _ _)]
  (goog.events/unlistenByKey (:click-listen-key history))
  (goog.events/listen
   js/document
   goog.events.EventType.CLICK
   (fn [event]
     (when-let [element (Yzma.frontend.history/closest-by-tag
                         (Yzma.frontend.history/event-target event) "a")]
       (let [uri (.parse goog.Uri (.-href element))]
         (when (Yzma.frontend.history/ignore-anchor-click?
                (.-router history) event element uri)
           (.preventDefault event)
           (let [path (str (.getPath uri)
                           (when (.hasQuery uri)
                             (str "?" (.getQuery uri)))
                           (when (.hasFragment uri)
                             (str "#" (.getFragment uri))))]
             (.pushState js/window.history nil "" path)
             (Yzma.frontend.history/-on-navigate history path)))))) true))