---
title: "useScriptTriggerInteraction()"
description: "在配置的用户交互后加载脚本。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/docs/api/use-script-trigger-interaction"
last_updated: "2026-08-11T09:33:16.861Z"
---

当配置的任意交互事件发生时加载脚本。

监听器会在 `onNuxtReady` 中附加，因此在 Nuxt 准备就绪之前发生的交互不会被计入。传入空的 `events` 数组会抛出错误。

## 函数签名

```ts
function useScriptTriggerInteraction(options: InteractionScriptTriggerOptions): UseScriptTrigger
```

## 参数

```ts
export interface InteractionScriptTriggerOptions {
  /**
   * 要监听的交互事件。
   */
  events: string[]
  /**
   * 监听事件的目标元素。
   * @default document.documentElement
   */
  target?: EventTarget | null
}
```

## 返回值

用于 `scriptOptions.trigger` 的 Unhead 触发函数。它会在首次匹配的事件发生后加载脚本，然后移除所有监听器。释放使用者作用域会移除待处理的监听器，包括在 Nuxt 准备就绪之前发生释放的情况。目标为 `null` 时，脚本不会加载。

## 在 Nuxt 配置中的使用

注册表条目和全局脚本可直接在 `nuxt.config` 中接受触发器：

<code-group>

```ts [Registry Script]
export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAnalytics: {
        id: 'GA_MEASUREMENT_ID',
        trigger: { interaction: ['scroll', 'click', 'keydown'] }
      }
    }
  }
})
```

```ts [Global Script]
export default defineNuxtConfig({
  scripts: {
    globals: {
      chatWidget: ['https://widget.example.com/chat.js', {
        trigger: { interaction: ['scroll', 'click', 'touchstart'] }
      }]
    }
  }
})
```

</code-group>

## 示例

### 基本用法

当用户滚动、点击或按键时加载脚本：

```ts
const script = useScript({
  src: 'https://example.com/chat-widget.js',
}, {
  trigger: useScriptTriggerInteraction({
    events: ['scroll', 'click', 'keydown']
  })
})
```

### 首次交互时加载分析脚本

仅当用户实际与您的网站交互时加载分析脚本：

```vue
<script setup lang="ts">
// 在任何用户交互时加载分析脚本
const { proxy, status } = useScriptGoogleAnalytics({
  id: 'GA_MEASUREMENT_ID',
  scriptOptions: {
    trigger: useScriptTriggerInteraction({
      events: ['click', 'scroll', 'keydown', 'touchstart']
    })
  }
})

// 跟踪首次交互
watch(status, (value) => {
  if (value === 'loaded') {
    proxy.gtag('event', 'first_interaction', {
      event_category: 'engagement'
    })
  }
})
</script>
```

### 监听特定元素

`target` 选项接受一个在组合式函数运行时已经存在的 `EventTarget`。对于 Vue 模板引用，请使用 [`useScriptTriggerElement()`](/docs/api/use-script-trigger-element)，它接受一个计算得到的元素引用。为了保留水合之前发生的事件，请将返回的 `ssrAttrs` 绑定到渲染的元素上，具体如其 API 参考中所示。

## 选择事件

- 监听表明用户很快会需要脚本的交互。
- 当功能支持键盘和触摸输入方式时，应包含键盘和触摸事件。
- 使用 `target` 将监听器限制在页面的相关部分。
- 如果即使没有交互，脚本也必须在截止时间前加载，请将事件监听器和超时结合到一个自定义触发函数中。