2017-02-24 80 views
1

我想弄清楚爲什麼我的控制檯不記錄我的日誌語句在我的單擊事件處理程序。任何幫助將不勝感激。爲什麼a幀點擊事件不起作用?

這是我的JS小提琴。 https://jsfiddle.net/tznezkqo/

我使用的是A-框架版本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!'); 
     }); 
    } 
    }); 

}); 

回答

2

我相信你必須確保組件註冊之前使用的元素。

這裏是你的榜樣的修改版本: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> 
+0

這是有道理的。謝謝 我剛剛將我的app.js移動到了頭部,而不是在我的工作表的底部。 非常感謝您的幫助。 –