Docs

Examples

Get Motion+

Docs

Examples

Get Motion+

Docs

Examples

Get Motion+

Documentation

Documentation

JS

React

Vue

Get started

Examples

Animation

Gestures

Motion values

Utils

Integrations

Guides

JS

React

Vue

Get started

Examples

Animation

Gestures

Motion values

Utils

Integrations

Guides

JavaScript

press

press

Motion 的 press 函数检测按下手势，并在手势开始、结束或取消时触发事件。

它与浏览器原生事件（如 "pointerstart" 等）不同，因为 press 会自动过滤掉辅助指针事件，例如右键单击或第二个触摸点。

它还在 "click" 的基础上进行了扩展，使其非常适合辅助功能。每个带有按下手势的元素都会自动通过焦点和 Enter 键变为键盘可访问。

press("button", (element) => {
  console.log("press started on", element)

  return () => console.log("press ended")
})

press 还具有以下特点：

  • 简洁：自动管理事件监听器

  • 便捷：接受元素或 CSS 选择器，以便一次附加多个监听器

  • 懒加载：仅附加所需的监听器

它可以用于触发任何函数，也可以用于启动和停止动画

press("button", (element) => {
  animate(element, { scale: 0.9 })

  return () => animate(element, { scale: 1 })
})

视频概述

用法

导入

press 可以通过 "motion" 导入。

import { press } from "motion"

按下开始

press 可以检测 Element/元素数组上的按下开始手势

press(
  document.getElementById("my-id"),
  () => {
    console.log("my-id pressed!")
  }
)

它还接受 CSS 选择器，以检测多个元素上的按下开始

press("a", () => console.log("link pressed"))

回调函数会接收到被按下的元素和触发事件的 PointerEvent

press("div:nth-child(2)", (element, startEvent) => {
  console.log("Pressed", element)
  console.log("At", startEvent.clientX, startEvent.clientY)
})

按下结束

按下开始函数可以选择性地返回一个函数，该函数将在按下手势结束时被调用

press(element, (element, startEvent) => {
  console.log("press start")
  
  return (endEvent) => {
    console.log("press end")
  }
})

按下结束回调函数会传递第二个参数 info。它目前有一个属性 success。如果 true，则表示按下已成功完成，类似于单击。如果 false，则表示按下在元素外部结束。

press(element, () => {
  return (endEvent, info) => {
    console.log("press ", info.success ? "end" : "cancel")
  }
})

当使用键盘辅助功能时，如果在按下 Enter 键时元素失去焦点，success 将为 false。

取消手势

press 返回一个函数，当调用该函数时，将取消与手势关联的所有活动事件处理程序。

const cancelPress = press(element, callback)

cancelPress()

选项

passive

默认值： true

如果设置为 false，则可以调用 event.preventDefault()，但手势的性能会降低。了解更多关于被动事件的信息.

once

默认值： false

如果设置为 true，则每个提供的元素将仅触发一次手势。

Motion+ 示例

Motion+只需一次性付款，即可获得终身会员资格，访问不断增长的高级示例的源代码，以及高级组件，如 Cursor 和 AnimateNumber，以及以下函数：splitText.

以 press 为特色的示例包括

Motion 的 press 函数检测按下手势，并在手势开始、结束或取消时触发事件。

它与浏览器原生事件（如 "pointerstart" 等）不同，因为 press 会自动过滤掉辅助指针事件，例如右键单击或第二个触摸点。

它还在 "click" 的基础上进行了扩展，使其非常适合辅助功能。每个带有按下手势的元素都会自动通过焦点和 Enter 键变为键盘可访问。

press("button", (element) => {
  console.log("press started on", element)

  return () => console.log("press ended")
})

press 还具有以下特点：

  • 简洁：自动管理事件监听器

  • 便捷：接受元素或 CSS 选择器，以便一次附加多个监听器

  • 懒加载：仅附加所需的监听器

它可以用于触发任何函数，也可以用于启动和停止动画

press("button", (element) => {
  animate(element, { scale: 0.9 })

  return () => animate(element, { scale: 1 })
})

视频概述

用法

导入

press 可以通过 "motion" 导入。

import { press } from "motion"

按下开始

press 可以检测 Element/元素数组上的按下开始手势

press(
  document.getElementById("my-id"),
  () => {
    console.log("my-id pressed!")
  }
)

它还接受 CSS 选择器，以检测多个元素上的按下开始

press("a", () => console.log("link pressed"))

回调函数会接收到被按下的元素和触发事件的 PointerEvent

press("div:nth-child(2)", (element, startEvent) => {
  console.log("Pressed", element)
  console.log("At", startEvent.clientX, startEvent.clientY)
})

按下结束

按下开始函数可以选择性地返回一个函数，该函数将在按下手势结束时被调用

press(element, (element, startEvent) => {
  console.log("press start")
  
  return (endEvent) => {
    console.log("press end")
  }
})

按下结束回调函数会传递第二个参数 info。它目前有一个属性 success。如果 true，则表示按下已成功完成，类似于单击。如果 false，则表示按下在元素外部结束。

press(element, () => {
  return (endEvent, info) => {
    console.log("press ", info.success ? "end" : "cancel")
  }
})

当使用键盘辅助功能时，如果在按下 Enter 键时元素失去焦点，success 将为 false。

取消手势

press 返回一个函数，当调用该函数时，将取消与手势关联的所有活动事件处理程序。

const cancelPress = press(element, callback)

cancelPress()

选项

passive

默认值： true

如果设置为 false，则可以调用 event.preventDefault()，但手势的性能会降低。了解更多关于被动事件的信息.

once

默认值： false

如果设置为 true，则每个提供的元素将仅触发一次手势。

Motion+ 示例

Motion+只需一次性付款，即可获得终身会员资格，访问不断增长的高级示例的源代码，以及高级组件，如 Cursor 和 AnimateNumber，以及以下函数：splitText.

以 press 为特色的示例包括

Motion 的 press 函数检测按下手势，并在手势开始、结束或取消时触发事件。

它与浏览器原生事件（如 "pointerstart" 等）不同，因为 press 会自动过滤掉辅助指针事件，例如右键单击或第二个触摸点。

它还在 "click" 的基础上进行了扩展，使其非常适合辅助功能。每个带有按下手势的元素都会自动通过焦点和 Enter 键变为键盘可访问。

press("button", (element) => {
  console.log("press started on", element)

  return () => console.log("press ended")
})

press 还具有以下特点：

  • 简洁：自动管理事件监听器

  • 便捷：接受元素或 CSS 选择器，以便一次附加多个监听器

  • 懒加载：仅附加所需的监听器

它可以用于触发任何函数，也可以用于启动和停止动画

press("button", (element) => {
  animate(element, { scale: 0.9 })

  return () => animate(element, { scale: 1 })
})

视频概述

用法

导入

press 可以通过 "motion" 导入。

import { press } from "motion"

按下开始

press 可以检测 Element/元素数组上的按下开始手势

press(
  document.getElementById("my-id"),
  () => {
    console.log("my-id pressed!")
  }
)

它还接受 CSS 选择器，以检测多个元素上的按下开始

press("a", () => console.log("link pressed"))

回调函数会接收到被按下的元素和触发事件的 PointerEvent

press("div:nth-child(2)", (element, startEvent) => {
  console.log("Pressed", element)
  console.log("At", startEvent.clientX, startEvent.clientY)
})

按下结束

按下开始函数可以选择性地返回一个函数，该函数将在按下手势结束时被调用

press(element, (element, startEvent) => {
  console.log("press start")
  
  return (endEvent) => {
    console.log("press end")
  }
})

按下结束回调函数会传递第二个参数 info。它目前有一个属性 success。如果 true，则表示按下已成功完成，类似于单击。如果 false，则表示按下在元素外部结束。

press(element, () => {
  return (endEvent, info) => {
    console.log("press ", info.success ? "end" : "cancel")
  }
})

当使用键盘辅助功能时，如果在按下 Enter 键时元素失去焦点，success 将为 false。

取消手势

press 返回一个函数，当调用该函数时，将取消与手势关联的所有活动事件处理程序。

const cancelPress = press(element, callback)

cancelPress()

选项

passive

默认值： true

如果设置为 false，则可以调用 event.preventDefault()，但手势的性能会降低。了解更多关于被动事件的信息.

once

默认值： false

如果设置为 true，则每个提供的元素将仅触发一次手势。

Motion+ 示例

Motion+只需一次性付款，即可获得终身会员资格，访问不断增长的高级示例的源代码，以及高级组件，如 Cursor 和 AnimateNumber，以及以下函数：splitText.

以 press 为特色的示例包括

inView

motionValue

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
网站

关于

博客

Docs

Examples

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
网站

关于

博客

Docs

Examples

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky