简介
@jworkshop/mouse 是一款用于监听鼠标动作的 npm 包。它提供了多种可自定义的鼠标事件，如点击、移动、拖动等，可以轻松地应用于各种前端应用中。
安装
使用 npm 安装：
npm install @jworkshop/mouse
安装完成后，可以直接在项目中引入使用。
使用指南
引入
在需要使用的文件中引入 @jworkshop/mouse：
import * as Mouse from '@jworkshop/mouse'
监听事件
要监听鼠标事件，需要调用 Mouse 的 addListener() 方法。该方法接受两个参数：事件名称和回调函数。
下面是一个监听鼠标点击事件的示例代码：
Mouse.addListener('click', (x, y) => {
console.log(`Mouse is clicked at (${x}, ${y})`)
})在上面的代码中，当鼠标发生点击事件时，控制台会输出类似“Mouse is clicked at (100, 200)”这样的信息，其中的数字表示鼠标点击的坐标值。
可用的事件
@jworkshop/mouse 提供了多个可用的事件，包括：
- click：鼠标被点击时触发。
- move：鼠标移动时触发。
- drag：鼠标拖动时触发。
- wheel：鼠标滚轮滚动时触发。
以上每个事件都会传入相应的参数，具体如下：
- click：x、y
- move：x、y、dx、dy
- drag：x、y、dx、dy、startX、startY
- wheel：dX、dY、angle
在回调函数中，可以通过这些参数来获取鼠标相关信息。
自定义事件
除了以上可用的事件，@jworkshop/mouse 还支持自定义事件。您可以通过 Mouse 的 addCustomEvent() 方法来创建自定义事件。
以下是一个自定义事件的示例代码：
-- -------------------- ---- -------
----------------------------------- -
---------- ---- -- ---------
-------- --- -- -- -
-- ------------- -
-------------------------
----------- - ----
------------------------ -- --
- ---- -
----------- - ------------- -- -
----------- - ----
-- ---------------
-
--
--在上面的代码中，我们创建了一个名为 doubleClick 的自定义事件，其中 frequency 参数表示双击事件的触发频率，onClick 回调函数会在鼠标点击事件发生时被调用，并确定是否触发双击事件。
退出监听
要退出对鼠标事件的监听，可以调用 Mouse 的 removeListener() 方法：
Mouse.removeListener('click', onClick)在上面的代码中，我们从鼠标点击事件中退出了名为 onClick 的回调函数的监听。
总结
@jworkshop/mouse 是一款非常实用的 npm 包，它可以监听鼠标事件、支持自定义事件，可应用于各种前端应用中。本文详细介绍了包的安装和使用方法，并提供了许多代码示例，希望能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e244389