为什么 a-frame 点击事件不起作用？答案

【问题标题】：Why isn't the a-frame click event working?为什么 a-frame 点击事件不起作用？
【发布时间】：2017-02-24 20:41:43
【问题描述】：

我试图弄清楚为什么我的控制台没有在我的点击事件处理程序中记录我的日志语句。任何帮助将不胜感激。

这是我的 JS Fiddle。 https://jsfiddle.net/tznezkqo/

我使用的是 A-Frame 5.0 版

这是我的 HTML

 <!-- Player -->
  <a-entity camera universal-controls="movementControls: checkpoint" checkpoint-controls="mode: animate"
            position="0 1.764 0">
    <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1"
              geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" material="color: #CCC; shader: flat;">
    </a-entity>
  </a-entity>


  <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue" position="-2 2.2 -1.5"></a-entity>

还有我的 JS

$(document).ready(function() {

  AFRAME.registerComponent('cursor-listener', {
    init: function () {
      this.el.addEventListener('click', function (evt) {
        console.log('I was clicked at: ', evt.detail.intersection.point);
      });
    }
  });

  AFRAME.registerComponent('collider-check', {
    dependencies: ['raycaster'],
    init: function () {
      this.el.addEventListener('raycaster-intersected', function () {
        console.log('Player hit something!');
      });
    }
  });

});

【问题讨论】：

标签： aframe webvr

【解决方案1】：

我相信你必须确保组件在元素被使用之前被注册。

这是您的示例的修改版本：https://jsfiddle.net/pj3m4obt/2/

<script>
AFRAME.registerComponent('cursor-listener', {
    init: function () {
         this.el.addEventListener('click', function (evt) {
        console.log('I was clicked at: ', evt.detail.intersection.point);
      });
    }
  });
</script>
<body>
...
<a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue" position="-2 2.2 -1.5"></a-entity>

【讨论】：

这是有道理的。谢谢，我只是将 app.js 移到了头部，而不是工作表的底部。非常感谢您的帮助。