从 AFrame 中的 js 动态发出事件

Question

标题差不多。 我希望能够从 Javascript 脚本调用发射。 这是我的设置（为简洁而编辑）：

<a-video 
   animation__begin="property: scale; to: 20 20 20; dur: 200; startEvents: startplay"
   animation__rewind="property: scale; to: 1 1 1; dur: 200; startEvents: endplay"
   src="#myvid" id="avideo"
   onclick="this.emit('startplay'); playvideo('myvid');"></a-video> <!-- this.emit works, but calling the defined emit function won't work -->
<a-image src="#pause"
   onclick="pausevideo('myvid'); /*works: document.getElementById('v-cadrage').emit('endplay')*/ emit(this, 'avideo', 'endplay')"></a-image> <!-- emit() doesn't work here -->

..

<script>
    function emit(from, id, eventname) {
      document.getElementById(id).emit.bind(from)(eventname);
    }
</script>

从控制台调用时， emit function工作。 但是，当从内联 javascript 调用时，我无法让它工作。 如果我重写整个document.getElement...内联代码，它也可以工作。 在没有.bind() “hack”的情况下，我观察到相同的结果。

我错过了什么？ 我怎样才能让它工作？ 你能重现这种情况吗？

谢谢

Answer 1

当您单击这样的元素时：

<a-box onclick="emit('something');"></a-box>

在当前的 scope 中调用emit - 这是框。 所以它有点像document.querySelector("a-box").emit('something') 。

要使用您的 function，只需更改其名称即可。

---

顺便说一句，我真的建议将所有逻辑移至自定义组件。 它应该简化事件的管理（比如这里）——只node.emit(event-name) 。