sveltestrap 的 `listgroupitem` 等组件默认不转发 `dblclick` 事件，需通过原生 dom 包裹或事件委托实现，同时应兼顾键盘可访问性与用户体验。
在 Svelte 应用中使用 Sveltestrap（如 <ListGroupItem>）时，直接绑定 on:dblclick 通常无效——这不是 Svelte 本身的限制，而是组件设计导致的：Sveltestrap 组件并非原生 HTML 元素，而是封装的 Svelte 组件；它们仅显式暴露（或转发）特定事件。查看 ListGroupItem.svelte 源码可知，它仅转发 click、keydown 等基础事件，并未转发 dblclick，因此 on:dblclick={handler} 不会触发。
✅ 正确解决方案：使用原生 <div> 包裹并监听
最简洁可靠的方案是用一个语义中立、无样式干扰的 <div> 包裹内容，并在其上绑定 on:dblclick：
<ListGroupItem>
<div on:dblclick={() => handler(params)} class="w-100 h-100">
<Row>
<Col><Icon name="file" /></Col>
<Col>Document Name</Col>
<Col class="text-end">2.4 MB</Col>
</Row>
</div>
</ListGroupItem>? 提示：添加 class="w-100 h-100"（若使用 Bootstrap/Sveltestrap 的 CSS）确保 <div> 完全覆盖 ListGroupItem 可点击区域，避免因 padding/margin 导致点击热区丢失。
⚠️ 注意事项与最佳实践
-
键盘可访问性（a11y）不可忽视：双击（dblclick）本质是鼠标专属交互，对键盘用户（如屏幕阅读器或仅用 Tab 导航的用户）不可达。应同步提供替代操作路径，例如：
- 为行添加 role="row" 和 tabindex="0"；
- 监听 on:keydown 并响应 Enter 或 Space 键：
<div on:dblclick={() => handler(params)} on:keydown={(e) => e.key === 'Enter' && handler(params)} tabindex="0" class="w-100 h-100" > <!-- 内容 --> </div>
避免滥用双击：Web UI 中双击并非标准交互范式（对比桌面应用），多数用户不会预期列表行支持双击。建议优先考虑单击打开详情、右键菜单或显式操作按钮（如“编辑”图标），以提升一致性与可用性。
-
替代思路：事件委托（高级场景）
若需批量处理大量列表项的双击逻辑，可在父容器（如 <ListGroup>）上使用 on:dblclick|delegate，结合 event.target 判断来源行：<ListGroup on:dblclick|delegate=".list-group-item-wrapper"={handleDblClick}> {#each items as item} <ListGroupItem> <div class="list-group-item-wrapper"> <Row>...</Row> </div> </ListGroupItem> {/each} </ListGroup>
总之，组件事件能力取决于其内部实现，而非 HTML 标签名。遇到类似问题时，优先查阅组件源码或文档确认事件支持列表；当原生事件不可用时，合理使用 DOM 包裹 + 可访问性增强，是兼顾功能、体验与合规性的专业做法。
