AFrame：触摸事件监听器无法触发

Question

我是Aframe和3D世界的新手。我正在尝试向实体添加点击侦听器。我遵循了人们的建议，但它始终无法触发点击功能。当我使用raycaster相交时，它可以发出警报。

<a-scene
  xrextras-gesture-detector
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement: true"
  xrweb>

  <a-assets>
    <a-asset-item id="out-glb" src="./assets/Models/out.glb"></a-asset-item>
    <img id="start" src="./assets/Images/3d_text_start2x.png">
  </a-assets>

  <a-camera
    id="camera"
    position="0 4 6"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>
  
  <a-entity
    light="
      type: directional;
      intensity: 0.8;
      castShadow: true;
      shadowMapHeight:2048;
      shadowMapWidth:2048;
      shadowCameraTop: 10;
      target: #model;"
      xrextras-attach="target: model; offset: 1 15 3;"
    shadow>
  </a-entity>

  <a-light type="ambient" intensity="0.7"></a-light>

  <xrextras-named-image-target name="xxxx" class="cantap">
      <a-entity id="model" gltf-model="#out-glb" scale="0.7 0.7 0.7" class="cantap" >
        <a-image id="xxx" position="0 0 0" overlay src="#start" width="2" height="2" class="cantap" tap-hotspot ></a-image>
      </a-entity>
  </xrextras-named-image-target>
</a-scene>

和

const tapHotspotComponent = {
  init() {
    console.log("loaded tap component")
   
    // raycaster-intersected
     this.el.addEventListener('click', function (evt) {
        alert("tapped")
    });
  },
}
export {tapHotspotComponent}