jQuery模拟按键事件无法触发Spline 3D嵌入内容响应问题排查

问题背景 #

目标是实现：鼠标悬停在带有hoverx类的元素上时，通过jQuery模拟按下0键，触发嵌入的Spline 3D内容的预设可视化响应（手动按0键可正常触发），但当前代码无法生效。

现有代码 #

1. jQuery模拟按键代码 #

$(document).ready(function() {
    // Add event listener when DOM is ready
    $('.hoverx').mouseover(function() {
      // Create and trigger a keypress event for '0' key
      $(document).trigger(jQuery.Event('keypress', {
        key: '0',
        keyCode: 48, // ASCII code for '0' key
        which: 48, // ASCII code for '0' key
        code: 'Digit0',
        charCode: 48 // ASCII code for '0' key
      }));
    });
  });

2. 网站HTML结构（Webflow搭建，已引入jQuery） #

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dokument</title>
</head>

<body>
    <nav> </nav>
    <section>
          <div>
              <div data-spline-url="https://prod.spline.design/gWaLjgmepcVMzPkW/scene.splinecode">
                  <canvas width="1640" height="817" style="display: block; width: 100%; height: 100%;">
                  </canvas>
              </div>
          </div>
          <div>
              <div>
                  <div>
                    <div class="hoverx">
                      <h6>TEXT</h6>
                    </div>
                  </div>
              </div>
          </div>
    </section>
</body>
</html>

问题原因 #

1. 事件触发对象错误：Spline的3D内容会在自身的canvas上下文中监听按键事件，当前代码把事件触发在document上，Spline根本捕获不到。
2. 事件类型不匹配：keypress事件已被废弃，Spline大概率监听的是keydown或keyup事件，而非keypress。
3. 焦点缺失：手动按0键时，页面或Spline的canvas处于焦点状态，但模拟事件时canvas未获得焦点，导致事件被忽略。
4. jQuery模拟的局限性：jQuery模拟的事件无法完全还原原生事件的所有属性，而Spline的事件监听可能绑定在原生事件上，jQuery的触发机制无法触发。

修复方案 #

方案1：直接给Spline Canvas触发原生keydown事件 #

先让canvas获得焦点，再触发原生按键事件，这是最直接的解决方式：

$(document).ready(function() {
    $('.hoverx').mouseover(function() {
        // 获取Spline对应的canvas元素
        const splineCanvas = $('div[data-spline-url] canvas')[0];
        if (!splineCanvas) return;

        // 先让canvas获得焦点，确保能捕获按键事件
        splineCanvas.focus();

        // 创建并触发原生keydown事件
        const keyEvent = new KeyboardEvent('keydown', {
            key: '0',
            keyCode: 48,
            code: 'Digit0',
            bubbles: true,
            cancelable: true
        });
        splineCanvas.dispatchEvent(keyEvent);
    });
});

方案2：使用Spline官方API（如果支持） #

部分Spline嵌入场景提供了直接调用交互动作的API，无需模拟按键。可以查找Spline官方文档，确认是否有类似triggerAction的方法，直接触发预设的0键响应动作，这种方式比模拟按键更可靠。

方案3：处理iframe场景（如果Spline是iframe嵌入） #

如果Webflow实际是用iframe嵌入Spline内容，需要获取iframe的内部上下文再触发事件：

$(document).ready(function() {
    $('.hoverx').mouseover(function() {
        const splineIframe = $('iframe[data-spline-url]')[0];
        if (!splineIframe) return;
        
        const iframeWindow = splineIframe.contentWindow;
        const keyEvent = new KeyboardEvent('keydown', {
            key: '0',
            keyCode: 48,
            code: 'Digit0',
            bubbles: true,
            cancelable: true
        });
        iframeWindow.document.dispatchEvent(keyEvent);
    });
});

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