为啥 a-frame 点击事件不起作用?

Posted

技术标签:

【中文标题】为啥 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!');
      );
    
  );

);

【问题讨论】:

【参考方案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 移到了头部,而不是工作表的底部。非常感谢您的帮助。

以上是关于为啥 a-frame 点击事件不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

为啥div里的onclick()事件不起作用?不会jq

为啥div里的onclick()事件不起作用?不会jq

A-Frame 中的点击事件不会停止声音

解决layui动态追加的点击事件不起作用问题

jquerymobile 点击事件不起作用

iframe 对象的点击事件不起作用