0

我正在使用试剂来开发网站。实际上,一般来说,我不清楚如何在试剂中处理触摸事件。我读了这篇文章 clojurescript: touch events and Domina,但是我需要使用 domina 来处理带有 reagent 的触摸启动事件吗?如果用户向左或向右滑动了 %,任何人都会有一段代码来检测(给定一个 dom 元素)吗?

4

1 回答 1

3

Reagent 使用 React 的虚拟 DOM 和合成事件。触摸事件在 React 中可用,但您必须(.initializeTouchEvents js/React true)在渲染任何组件之前调用(即在调用之前reagent.core/render-component)。

编辑:下面的代码不起作用,因为触摸事件比鼠标事件更复杂。有关一些(JS)示例,请参阅此 MDN 页面。React 似乎实现了相同的触摸 API。


对于滑动百分比,请执行以下操作(未经测试):

(defn swipe-element []
  (let [swipe-state (atom {:width 0, :start-x 0, :current-x 0})]
    (fn []
      [:div {:on-touch-start 
             (fn [e]
               (reset! swipe-state {:width (.. e -target -offsetWidth)
                                    :start-x (.. e -target -pageX)
                                    :current-x (.. e -target -pageX)}))
             :on-touch-move
             (fn [e] 
               (swap! swipe-state assoc :current-x (.. e -target -pageX)))}
        (let [{:keys [width start-x current-x]} @swipe-state
              direction (if (> current-x start-x) "right" "left")]
          (str "Swipe " direction ": "
               (* (/ (.abs js/Math (- start-x current-x)) width) 100) "%")))))
于 2015-09-06T10:23:58.063 回答