interact.js 中文文档（事件）InteractEvent 可以被不同的功能触发。事件类型包括：为了对 Int

交互事件（InteractEvents）

<div>Drag, resize, or perform a multi-touch gesture</div>

.target {
  display: inline-block;
  min-height: 3rem;
  background-color: #29e;
  color: white;
  padding: 1rem;
  border-radius: 0.75rem;
}

function listener (event) {
  event.target.textContent = `${event.type} at ${event.pageX}, ${event.pageY}`
}

interact(target)
  .on('dragstart', listener)
  .on('dragmove dragend', listener)
  .on(['resizemove', 'resizeend'], listener)
  .on({
    gesturestart: listener,
    gestureend: listener,
  })

interact(target).draggable({
  onstart: listener,
  onmove: listener,
  onend: listener,
})

interact(target).resizable({
  listeners: [{
    start: function (event) {
      console.log(event.type, event.pageX, event.pageY)
    },
  }],
})

InteractEvent 可以被不同的功能触发。事件类型包括：

可拖动（Draggable）: dragstart, dragmove, draginertiastart, dragend
可调节尺寸（Resizable）: resizestart, resizemove, resizeinertiastart, resizeend
可手势（Gesturable）: gesturestart, gesturemove, gestureend

为了对 InteractEvent 进行反馈，你必须添加监听器（listeners）对特定的类型在配置了该功能的可交互对象上（interactable）。被创建的事件类型会被传到监听器内作为唯一的参数。

InteractEvent 属性包含常用的鼠标、触摸时间属性，例如 pageX/Y, clientX/Y, 辅助按键，等。还有一些属性提供坐标上的事件和事件特有的数据。下面的表格展示了这些时间。

通用

属性	描述
`target`	正在交互中的对象
`interactable`	正在交互中的可交互对象（Interaction）
`interaction`	事件所属于的交互类型
`x0`, `y0`	页面的 x 和 y 坐标在事件开始时候
`clientX0`, `clientY0`	客户端的 x 和 y 坐标在事件开始时候
`dx`, `dy`	鼠标、触摸在坐标上的变化
`velocityX`, `velocityY`	指针横向或纵向的速度
`speed`	指针的速度
`timeStamp`	事件开始时候的时间

拖

属性	描述
dragmove
`dragEnter`	对象被拖动时进入的的落入区（dropzone）
`dragLeave`	对象被拖动时离开的的落入区（dropzone）

调节尺寸

属性	描述
`edges`	元素被调节的边缘（edges）
`rect`	一个具当前元素规格（dimensions）的对象
`deltaRect`	从上次事件开始到现在被调整的规格（dimensions

手势

属性	描述
`distance`	从第一次接触到当前的距离
`angle`	两个触摸产生线的角度
`da`	上次到当前的角度变化
`scale`	开始事件和当前事件距离的比例
`ds`	上次到当前的尺寸变化
`box`	所有接触点的边界框

在手势事件中，页面和客户端坐标被计算为接触坐标和速度的平均值。

拖入事件（Drop Events）

interact(dropTarget)
  .dropzone({
    ondrop: function (event) {
      alert(event.relatedTarget.id
            + ' was dropped into '
            + event.target.id)
    }
  })
  .on('dropactivate', function (event) {
    event.target.classList.add('drop-activated')
  })

落入区可接收如下属性: dropactivate, dropdeactivate, dragenter, dragleave, dropmove, drop.

落入区事件是一个普通对象拥有下面属性：

属性	藐视
`target`	落入区的元素
`dropzone`	落入区可交互对象（Interactable）
`relatedTarget`	正在拖动的元素
`draggable`	正在拖动的可交互对象（Interactable）
`dragEvent`	相关联的拖动事件 – `drag{start,move,end}`
`timeStamp`	事件发生的事件
`type`	事件类型

指针事件（Pointer Events）

interact(target).on('hold', function (event) {
  console.log(event.type, event.target)
})

down 按下
move 移动
up 弹起
cancel 取消
tap 点击
doubletap 双击
hold 按住

这些 pointerEvents 大致代表了真实的 PointerEvent 接口，特别是：

鼠标事件中 event.pointerId 提供 TouchEvent#identifier 或 PointerEvent#pointerId 或 undefined
event.pointerType 提供了指针类型
没有模拟的鼠标事件在触摸事件之后

事件的属性没准会根据不同的浏览器和设备变化决定于事件接口的支持。举个例子：由一个 `touchstart` 来的 `down` 事件不会提供 `PointerEvent` 接口中定义的倾斜和压力属性。

设置指针事件

interact(target).pointerEvents({
  holdDuration: 1000,
  ignoreFrom: '[no-pointer]',
  allowFrom: '.handle',
  origin: 'self',
})

pointerEvent 没有被打断和限制的，但是可以被原始修正修正。tap 事件有 dt 属性代表了 down 和 up 事件的间隔时间。双击（doubletap） 中 dt 为两次点击的间隔时间。按住（hold）事件中 dt 是指针被按住的事件（大约为600毫秒）。

快速点击 Fast click

// 快速点击
interact('a[href]').on('tap', function (event) {
  window.location.href = event.currentTarget.href
  event.preventDefault()
})

tap 和 doubletap 不具有 click 时间在移动设备上的延迟，所以他在按钮（fast buttons）和链接（anchor links）上完美运行。并且，不想普通的点击事件，一个敲击（tap）事件不会在指针被移动后触发。