如何为Sveltestrap组件处理keydown/keyup/keypress事件？

问题核心：Svelte组件默认不会自动转发所有原生DOM事件到父组件层级，因此直接给<Card>组件绑定on:keydown不会生效，即便已经设置tabindex让卡片可聚焦。

以下是两种可行的解决方案：

方案一：通过bind:this手动绑定事件监听 #

直接获取Card对应的原生DOM元素，手动添加/移除keydown事件监听，确保事件能被正确捕获：

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import { Card, CardBody } from 'sveltestrap';

  let cardElement: HTMLElement;

  function handleKey(e: KeyboardEvent) {
    // 这里编写你的按键处理逻辑
    console.log('按下的按键:', e.key);
  }

  onMount(() => {
    cardElement?.addEventListener('keydown', handleKey);
  });

  onDestroy(() => {
    cardElement?.removeEventListener('keydown', handleKey);
  });
</script>

<Card bind:this={cardElement} tabindex="0">
  <CardBody>可聚焦卡片，按下任意键测试</CardBody>
</Card>

方案二：使用自定义Action封装事件监听 #

通过Svelte的自定义action，将事件监听逻辑封装成可复用的函数，代码更简洁：

<script lang="ts">
  import { Card, CardBody } from 'sveltestrap';

  // 自定义action：绑定keydown事件
  function bindKeydown(node: HTMLElement, handler: (e: KeyboardEvent) => void) {
    const handleKey = (e: KeyboardEvent) => handler(e);
    node.addEventListener('keydown', handleKey);
    
    // 组件销毁时移除监听
    return {
      destroy() {
        node.removeEventListener('keydown', handleKey);
      }
    };
  }

  function handleKey(e: KeyboardEvent) {
    // 按键处理逻辑
    console.log('按下的按键:', e.key);
  }
</script>

<Card tabindex="0" use:bindKeydown={handleKey}>
  <CardBody>可聚焦卡片，按下任意键测试</CardBody>
</Card>

注意事项：

• 确保tabindex设置为0（允许通过Tab键聚焦）或-1（仅允许通过JS方法聚焦），保证卡片元素具备可聚焦性。
• 两种方案都直接操作原生DOM，绕过了组件事件转发的限制，能确保keydown事件被正确捕获。

内容的提问来源于stack exchange，提问作者JTB