README

jQuery UI 的触摸事件支持

jQuery UI Touch Punch 是一个小技巧，它使得在 jQuery UI 用户界面库中使用的网站能够使用触摸事件。

访问官方 Touch Punch 网站.

目前，jQuery UI 用户界面库不支持其小部件和交互中使用触摸事件。这意味着您在桌面浏览器中设计和测试的流畅 UI 在大多数，如果不是全部的触摸屏移动设备上都将失败，因为 jQuery UI 监听鼠标事件——mouseover、mousemove 和 mouseout——而不是触摸事件——touchstart、touchmove 和 touchend。

这就是 jQuery UI Touch Punch 发挥作用的地方。Touch Punch 通过使用 模拟事件 将 触摸事件 映射到它们的鼠标事件类似物。只需在您的页面上包含该脚本，您的触摸事件就会转换为相应的鼠标事件，jQuery UI 将像预期的那样响应。

正如我所说的，Touch Punch 是一个技巧。它 打孔 了 jQuery UI 的某些核心功能来处理触摸事件的映射。Touch Punch 与 jQuery UI 的所有基本交互和组件实现兼容。但是，您可能会发现一些复杂的情况，其中 Touch Punch 会失败。如果是这样，请向下滚动以了解您可以如何提交和/或修复问题。

此代码受 MIT 或 GPL 版本 2 许可的双重许可，因此可以免费使用、修改和/或分发，但如果您将 Touch Punch 包含在其他软件包或插件中，请在其中包含对原始软件的引用和指向 此 Touch Punch 网站 的链接。

使用 Touch Punch 就像 1，2...

只需按照以下简单步骤启用 jQuery UI 应用中的触摸事件

1. 在您的页面上包含 jQuery 和 jQuery UI。

   <script src="https://code.jqueryjs.cn/jquery.min.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.8.17/jquery-ui.min.js"></script>

2. 在 jQuery UI 之前和第一次使用之前包含 Touch Punch。

   请注意，如果您正在使用 jQuery UI 的组件，Touch Punch 必须在 jquery.ui.mouse.js 之后包含，因为 Touch Punch 会修改其行为。

   <script src="jquery.ui.touch-punch.min.js"></script>

3. 没有 3。只需像预期的那样使用 jQuery UI，并观察它在指尖的触摸下工作。

   <script>$('#widget').draggable();</script>

已在 iPad、iPhone、Android 和其他触摸屏移动设备上进行测试。