README-CN.md

@livelybone/mouse-events

pkg.module supported, 天然支持 tree-shaking, 使用 es module 引用即可

English Document

Some complex mouse events, such as dragMove event with deltaX/deltaY relative to mousedown/touchstart, mouse wheel with good compatibility ...

repository

https://github.com/livelybone/mouse-events.git

Demo

https://github.com/livelybone/mouse-events#readme

Run Example

你可以通过运行项目的 example 来了解这个组件的使用，以下是启动步骤：

1. 克隆项目到本地 git clone https://github.com/livelybone/mouse-events.git
2. 进入本地克隆目录 cd your-module-directory
3. 安装项目依赖 npm i(使用 taobao 源: npm i --registry=http://registry.npm.taobao.org)
4. 启动服务 npm run dev
5. 在你的浏览器看 example (地址通常是 http://127.0.0.1:3000/examples/test.html)

Installation

npm i -S @livelybone/mouse-events

Global name - The variable the module exported in umd bundle

MouseEvents

Interface

去 index.d.ts 查看可用方法和参数

Usage

import { DragMove, Utils, MouseWheel, DragMoveEvent } from '@livelybone/mouse-events'

const el = document.getElementById('el')
let removeListener

removeListener = MouseWheel.bind(el, (ev: MouseWheel.CustomWheelEvent) => {
  // ...
})
removeListener()

removeListener = DragMove.bind(el, (ev: DragMoveEvent) => {
  // ...
})
removeListener()

console.log(Utils.$isMobile)
removeListener = Utils.$addListener(el, 'scroll', ev => {
  // ...
})
removeListener()

CDN

在 HTML 文件中直接引用，你可以在 CDN: unpkg 看到你能用到的所有 js 脚本

<-- 然后使用你需要的 -->
<script src="https://unpkg.com/@livelybone/mouse-events/lib/umd/<--module-->.js"></script>

或者，你也可以使用 CDN: jsdelivr 看到你能用到的所有 js 脚本

<script src="https://cdn.jsdelivr.net/npm/@livelybone/mouse-events/lib/umd/<--module-->.js"></script>