title: Add click event to Panolens Infospots
body: <p>I’m currently trying to add a click event to some Panolens Infospots. When you click on the Infospot a box should pop up, just like when you use <code>infospot.addHoverElement(element, 150)</code>, just on click instead of hover. I've tried some different things like using createElement (which can be seen in the code), but I can’t seem to find a solution that works. Is this possible?</p>
  <p>This is my code so far:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; &gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Image panorama&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;./style.css&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;panel&quot;&gt;&lt;/div&gt;
  
      &lt;script src='https://pchen66.github.io/js/three/three.min.js'&gt;&lt;/script&gt;
      &lt;script src='https://rawgit.com/pchen66/panolens.js/dev/build/panolens.min.js'&gt;&lt;/script&gt;&lt;script  src=&quot;./script.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre><code>var panorama, viewer, container, infospot, panel;
  
  container = document.querySelector( '#container' );
  panel = document.querySelector('#panel');
  
  panorama = new PANOLENS.ImagePanorama( 'https://pchen66.github.io/Panolens/examples/asset/textures/equirectangular/tunnel.jpg' );
  
  infospot = new PANOLENS.Infospot( 400, PANOLENS.DataImage.Info, false );
  infospot.position.set( 0, -2000, -5000 );
  infospot.addEventListener( &quot;click&quot;, function(){
    this.focus();
    let element = document.createElement( 'div' );
    element.style.backgroundColor = '#fff';
    element.style.maxWidth = '200px';
    element.style.maxHeight = '200px';
    element.style.fontFamily = '&quot;Trebuchet MS&quot;, Helvetica, sans-serif';
    element.style.position = 'absolute';
    document.body.appendChild(element);
  
    } );
    
  
  panorama.add( infospot );
  
  viewer = new PANOLENS.Viewer( {
    container: container,     
    controlBar: false,               
    controlButtons: [],               
    autoHideControlBar: true,     
    autoHideInfospot: false,      
    horizontalView: false,        
    cameraFov: 80,                    
    reverseDragging: false,       
    enableReticle: false,         
    dwellTime: 1500,           
    autoReticleSelect: true,      
    viewIndicator: false,         
    indicatorSize: 30,                
    output: 'overlay'
   } );
  viewer.add( panorama );
  
  let renderer, camera, scene, box;
  
  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0xffffff);
  renderer.setSize(panel.clientWidth, panel.clientHeight);
  camera = new THREE.PerspectiveCamera(45, panel.clientWidth / panel.clientHeight, 1, 2000);
  scene = new THREE.Scene();
  console.log(infospot.element);
  infospot.element.appendChild( renderer.domElement );
  
  box = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), new THREE.MeshNormalMaterial());
  box.position.z = -20;
  scene.add( box );
  
  viewer.addUpdateCallback(function(){
    renderer.render(scene, camera);
    box.rotation.y += 0.03;
  });
  
  </code></pre>
  <p>Any kind of help would be much appreciated!</p>