Svelte使用on:click触发Element.setCapture()废弃警告及功能异常问题

数据老陈

2026-8-15

问题分析与解决方案

问题原因

你遇到的Firefox浏览器警告和子容器无法打开的问题，根源在于给<li>元素绑定了on:focus={dispatch('click', catName)}：

Firefox处理焦点事件时，Svelte内部可能调用了已废弃的Element.setCapture()方法，触发警告；
focus事件与click事件的触发逻辑冲突，干扰了openSelectedCat函数的正常执行，导致子容器无法打开；
<li>默认不是可聚焦元素，强行绑定focus事件本身就容易引发跨浏览器兼容性问题。

修复方案

移除引发冲突的on:focus绑定，若需支持键盘导航（保证可访问性），改用标准键盘事件处理：

修改后的代码：

{#if categoryArray}
  <div class="searchCategoriesBottom">
    <div class="search-form" on:keydown>
      <ul class="categoryListUl">
        {#each categoryArray as catName, index}
          <li
            class="categoryLi"
            tabindex="0" <!-- 让li支持键盘聚焦 -->
            on:click={openSelectedCat}
            on:keydown.enter={openSelectedCat}
            on:keydown.space={(e) => {
              e.preventDefault(); // 阻止空格默认滚动行为
              openSelectedCat();
            }}
          >
            <span class="categoryDescription">{catName}</span>
          </li>
        {/each}
      </ul>
    </div>
  </div>
{/if}