title: A-Frame: Click event not works for objects
body: <p>I add an eventListener at click and a raycaster for an object, but when I click on the object nothing happens. If I open the aframe-inspector and I inspect the object without to do any changes, I’m going back to scene and I click again the object, it shows me the console.log from the eventListener. Somebody knows why and how can I fix it?</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>AFRAME.registerComponent('dinning-options', {
    init: function () {
      console.log('Registered');
      this.el.addEventListener('click', function (evt) {
        console.log('I was clicked at: ', evt.detail.target);
      });
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a-entity
    dinning-options
    raycaster="showLine: false; far: 100"
    obj-model="obj: #dinning-obj; mtl: #dinning-mtl;"
    id="dinning"
    position="7.430 0 -6.35"
    scale="0.003 0.003 0.003"
  &gt;&lt;/a-entity&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you!</p>