# useClickableContainer

## 使用方法

让整块容器可以点，同时不改变里面嵌套控件的原有行为。它解决的是「嵌套可交互元素」这个老问题：卡片整体可点，但卡片里还有按钮和链接，点这些控件不应该顺带触发卡片的动作。做法是看点击目标到容器之间有没有可交互的祖先，同时忽略文字选择。支持带 `href` 的跳转，包括中键和 Ctrl/Cmd 点击开新标签页。

```ts
import { useClickableContainer } from '@astryx-vue/core'
```

```vue
<script setup lang="ts">
import { useClickableContainer } from '@astryx-vue/core'
import { useTemplateRef } from 'vue'

const cardRef = useTemplateRef<HTMLElement>('card')
const { onClick, onMouseUp } = useClickableContainer({
  containerRef: cardRef,
  href: '/reports/quarterly',
})
</script>

<template>
  <div ref="card" v-bind="{ onClick, onMouseUp }">
    <button type="button">
      下载
    </button>
  </div>
</template>
```

## 建议

| 指引 | 做法 |
| --- | --- |
| 推荐 | 把 `onClick` 和 `onMouseUp` 都绑到容器上（`@click` 和 `@mouseup`），这样连中键点击也能处理。 |
| 推荐 | 在 `ClickableCard` 或 `SelectableCard` 内部使用，就是标准的卡片交互写法。 |
| 避免 | 整块容器本来就是一个可交互元素时不要用它；直接用 `<button>` 或 `<a>`。 |

## 参数

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `options` | `UseClickableContainerOptions` | — | 可点容器的配置对象。必传。 |
| `options.containerRef` | `Ref` | — | 外层容器的 ref。必传。 |
| `options.interactiveRef` | `Ref` | — | 容器里真正承担交互的那个元素的 ref（链接或按钮）。既没给 `onClick` 也没给 `href` 时，点击会转交给它。 |
| `options.onClick` | `(event: MouseEvent) => void` | — | 点在容器表面（不是嵌套控件）上时调用。 |
| `options.href` | `string` | — | 跳转地址。给了它，点容器就会跳到这里。 |
| `options.target` | `string` | — | 链接的 target，例如 `'_blank'`。和 `href` 一起决定跳转方式。 |
| `options.disabled` | `boolean` | `false` | 容器是否停用。 |

## 返回值

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `onClick` | `(event: MouseEvent) => void` | 绑到容器上的点击处理函数。 |
| `onMouseUp` | `(event: MouseEvent) => void` | 绑到容器上的鼠标抬起处理函数，负责有 `href` 时的中键跳转。 |