Блог

У меня есть небольшая программа 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