html - Svelte 无法正确处理来自 x3dom 的点击事件

Question

我有一个小的 hello world 程序可以一起尝试 svelte 和 x3dom。

<script>
    import { onMount } from 'svelte';

    let yes = false;

    let onclick = (event)=>{
        alert('ff');
    }
</script>
<style>
    h1 { fontweight: bold;}
</style>

<label>show cone</label>
<input type=checkbox bind:checked={yes}/>

<svelte:head>
    <link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'/>
    <script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'> </script> 
</svelte:head>
 
<h1>Hello, X3DOM!</h1> 
     
<x3d id="x3d"  width='500px' height='400px'> 
       <scene> 
        <shape on:click={onclick}> 
           <appearance> 
             <material diffuseColor='1 0 0'></material> 
           </appearance> 
           <box></box> 
        </shape> 
             
{#if yes}
        <transform translation='-3 0 0' > 
          <shape on:click={onclick}> 
             <appearance> 
               <material diffuseColor='0 1 0'></material> 
             </appearance> 
             <cone></cone> 
          </shape> 
        </transform> 
{/if}
             
        <transform translation='3 0 0'> 
          <shape on:click={onclick}> 
             <appearance> 
               <material diffuseColor='0 0 1'></material> 
             </appearance> 
             <sphere></sphere> 
          </shape> 
        </transform> 
       </scene> 
    </x3d> 
  
<h1>Mind Blown!!</h1>

问题是该on:click事件有一些奇怪的行为。

该复选框旨在显示和隐藏绿色圆锥。只要on:click={onclick}形状节点上的操作丢失，这就会起作用。当我将动作放入代码中时，我只能打开和关闭绿色三角形一次。

其次，该on:click事件仅适用于绿色锥体。相同的处理程序位于红色和蓝色对象上，但不会触发。

这里发生了什么。

实时代码在

https://svelte.dev/repl/6427e29e27404f48911d8e2708bcdfc0?version=3.29.0

标签： htmlsveltesvelte-3x3dx3dom