我正在使用试剂开发一个站点。一般情况下,我不清楚如何处理试剂中的触摸事件。我读了这篇文章触摸事件和Domina,但我是否需要使用Domina来处理与试剂的触摸启动事件?有人会有一段代码来检测(给定一个dom元素)用户是否向左或向右滑动了%吗?
Reagent使用React的虚拟DOM和合成事件。触摸事件在React中是可用的,但是你必须在渲染任何组件之前调用(.initializeTouchEvents js/React true)
(即在调用reagent.core/render-component
之前)。
编辑:下面的代码将无法工作,因为触摸事件比鼠标事件更复杂。请参阅这个MDN页面获取一些(JS)示例。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) "%")))))