# rc-touchlayer > react触摸/鼠标/触摸板事件统一分发层 Latest version **0.1.4** (published 2022-05-28) · ISC license · 0 weekly downloads ## Install ```sh npm install rc-touchlayer pnpm add rc-touchlayer yarn add rc-touchlayer bun add rc-touchlayer ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.4 | | Published | 2022-05-28 | | First published | 2021-12-04 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 233.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | chenzonghao001 | | Maintainers | chzh314 | ## Links - npm: https://www.npmjs.com/package/rc-touchlayer - npm.io page: https://npm.io/package/rc-touchlayer ## Recent versions - 0.1.4 (latest) — 2022-05-28 - 0.1.3 — 2022-05-28 - 0.1.2 — 2021-12-13 - 0.1.1 — 2021-12-13 - 0.1.0 — 2021-12-13 - 0.0.5 — 2021-12-07 - 0.0.4 — 2021-12-07 - 0.0.3 — 2021-12-07 - 0.0.2 — 2021-12-06 - 0.0.1 — 2021-12-04 ## README # rc-touchlayer 问题反馈: chzh314@hotmail.com > 派生自 @ke/touchlayer  将触摸事件、鼠标事件和触摸板/精确式滚轮/滚轮事件合并为用户行为进行反馈的交互统一层 ## 使用示例 ```tsx import React, { useState } from "react"; import TouchLayer, { TouchLayerEvent } from "rc-touchlayer"; export default function App() { const [x, setX] = React.useState(0); const [y, setY] = React.useState(0); const [scale, setScale] = React.useState(1); const [rotate, setRotate] = useState(0); return ( { setX(Math.max(0, Math.min(window.innerWidth - 50, x + e.deltaX))); setY(Math.max(0, Math.min(window.innerHeight - 50, y + e.deltaY))); console.log(e); }} onZoom={(e:TouchLayerEvent) => { console.log(e); setScale(Math.max(0.3, Math.min(10, scale + e.deltaZ / 50))); setRotate(rotate + e.deltaW); }} wheelX //用于支持滚轮和触摸板的横向滚动 wheelY //用于支持滚轮和触摸板的纵向滚动 >
); } ``` --- ## 可使用的事件 所有用户操作都会以`onOperate`的jsx参数属性回调形式向外传递事件，所有事件都符合`TouchLayerEvent`（见表2）类型定义，同时每种事件也会有自己独特的jsx参数如`onDrag`提供开发者使用。 - 表1 :`TouchLayerEventType`枚举定义 - 事件参照表 | 事件名称 | 说明 | jsx参数 | | -------------- | ----------------- | ------------------ | | `dragStart` | 开始拖动动作 | `onDragStart` | | `drag` | 拖动 | `onDrag` | | `dragEnd` | 结束拖动动作 | `onDragEnd` | | `inertanceEnd` | 惯性拖动结束 | `onInertanceEnd` | | `zoomStart` | 开始缩放/旋转动作 | `onZoomStart` | | `drag&zoom` | 拖动同时缩放 | `onDrag`\|`onZoom` | | `zoom` | 缩放 | `onZoom` | | `zoomEnd` | 结束缩放/旋转动作 | `onZoomEnd` | | `click` | 点击 | `onClick` | | `doubleClick` | 双击 | `onDoubleClick` | | `longtapStart` | 长按开始 | `onLongtapStart` | | `longtapEnd` | 长按结束 | `onLongtapEnd` | - 表1.1 : `TouchLayerOperateMode`枚举定义 - 用户操作模式 | 名称 | 说明 | | ----------- | -------------------------------- | | "drag" | 拖动动作 | | "zoom" | 缩放（旋转）动作 | | "drag&zoom" | 拖动同时缩放（旋转）动作 | | "none" | 当前动作不是由用户触发（如惯性） | - 表1.2 : `TouchLayerInputType`枚举定义 - 用户输入模式 | 名称 | 说明 | | ---------- | ------ | | "touch" | 触摸 | | "mouse" | 鼠标 | | "trackpad" | 触摸板 | | "wheel" | 滚轮 | - 表2 : `TouchLayerEvent`类型定义 | 属性 | 类型 | 说明 | | ------------ | --------------------- | ------------------------------ | | time | number | 页面打开事件触发经过的毫秒数 | | type | TouchLayerEventType | 事件的类型（见表1） | | operateMode | TouchLayerOperateMode | 用户操作的模式（见表1.1） | | inputType | TouchLayerInputType | 用户的输入方式（见表1.2) | | mouseButton0 | boolean | 鼠标左键是否被按下 | | mouseButton1 | boolean | 鼠标中键是否被按下 | | mouseButton2 | boolean | 鼠标右键是否被按下 | | clientX | number | 当前光标的客户端坐标X | | clientY | number | 当前光标的客户端坐标Y | | deltaX | number | 和上一次触发事件间位移的坐标X | | deltaY | number | 和上一次触发事件间位移的坐标Y | | deltaZ | number | 和上一次触发事件间缩放的距离 | | deltaW | number | 和上一次触发事件间旋转的弧度差 | | speedX | number | 坐标X分量速度 | | speedY | number | 坐标Y分量速度 | | distanceX | number | X分量总移动距离 | | distanceY | number | Y分量总移动距离 | | distanceZ | number | 缩放总距离 | | distanceW | number | 旋转总弧度（最大为2PI） | | inertance | boolean | 是否为惯性触发 | | moved | boolean | 当前光标是否移动过 | | target | HTMLElement | 触发事件的Dom元素 | ## 所有JSX参数 ```ts interface TouchLayerProps { /** * 全局事件监听 */ onOperate?: (event: TouchLayerEvent) => void; /** * 点击事件 */ onClick?: (event: TouchLayerEvent) => void; /** * 双击事件 */ onDoubleClick?: (event: TouchLayerEvent) => void; /** * 双击判定时间间隔 单位ms * 默认值200 ms */ doubleClickGap?: number; /** * 每次用户输入都反馈事件，不再按帧合并（性能降低，但反应变快） */ eachTick?: boolean; /** * 输入平滑过滤参数 0~1 值越小效果越平滑，同时滞后感越强 */ inputFilter?: number; /** * 开始拖拽 */ onDragStart?: (event: TouchLayerEvent) => void; /** * 拖拽动作 */ onDrag?: (event: TouchLayerEvent) => void; /** * 拖拽结束 */ onDragEnd?: (event: TouchLayerEvent) => void; /** * 惯性运动结束，注意，该方法会在onDragEnd后触发，无论是否开启惯性模拟。当前惯性模拟被其他输入打断后，该次运动不会触发本事件 */ onInertanceEnd?: (event: TouchLayerEvent) => void; /** * 关闭惯性模拟 */ noInertance?: boolean; /** * 开始长按 */ onLongtapStart?: (event: TouchLayerEvent) => void; /** * 结束长按 */ onLongtapEnd?: (event: TouchLayerEvent) => void; /** * 监听鼠标中键按下 */ useMouseMiddleButton?: boolean; /** * 监听鼠标右键按下 */ useMouseRightButton?: boolean; /** * 监听横向滚轮、横向触摸板事件 */ wheelX?: boolean; /** * 监听纵向滚轮、纵向触摸板事件 */ wheelY?: boolean; /** * 反转滚轮X输入 */ flipWheelX?: boolean; /** * 反转滚轮的Y输入 */ flipWheelY?: boolean; /** * 滚轮不需要按住metaKey直接触发缩放 */ wheelZoom?: boolean; /** * 开始缩放 */ onZoomStart?: (event: TouchLayerEvent) => void; /** * 缩放动作 */ onZoom?: (event: TouchLayerEvent) => void; /** * 缩放结束 */ onZoomEnd?: (event: TouchLayerEvent) => void; /** * 禁止缩放时拖拽 */ noZoomMove?: boolean; noEnableCheck?: boolean; /** * 禁止缩放结束后拖拽 */ noHandlerDownlevel?: boolean; preventDefault?: boolean; stopPropagation?: boolean; stopPropagationCapture?: boolean; /** * 防止错误输入事件传递的遮罩层的zIndex */ maskZIndex?: number; /** * dataset-type黑名单，用于保护特定子元素的交互，在该元素上的交互不会触发touchlayer事件 */ preventElementDataType?: string; /** * 该touchlayer内部的其他touchlayer上的事件不会传递到该层上 */ preventOtherTouchLayer?: boolean; style?: React.CSSProperties; className?: string; } ``` --- _Source: https://npm.io/package/rc-touchlayer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._