A-Frame：在 EventListener 中缩放 a-box：“this.el 未定义”

Question

我想在 A-Frame (JS) 中设置一个 EventListener 来监听 'mouseenter'-事件并重新缩放一个框。我从本教程中获取了源代码。每次我在框上移动光标时，EventListener 都会触发，但随后控制台显示

TypeError: this.el is undefined

参考这行代码：

this.el.object3D.scale.copy(data.to);

这是代码：

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>

<script>

  AFRAME.registerComponent('scale-on-mouseenter', {

    schema: {

      to: {default: '10 10 10', type: 'vec3'}

    },

    init: function () {

      var data = this.data;

      this.el.addEventListener('mouseenter', function () {

        this.el.object3D.scale.copy(data.to);

      });

    }

  });

</script>

...

 <a-box position="0 2 -5" scale-on-mouseenter>

 </a-box>

它还说：

core:schema:warn Default value `10 10 10` does not match type `vec3` in component `scale-on-mouseenter`

Answer 1

1）this.el is undefined。这是一个范围问题。this不引用同一个对象：//....init: function() {// here this refers the component objectconsole.log(this)&nbsp;this.el.addEventListener('event', function() {&nbsp; &nbsp; // here this refers to this.el (as the object which has the listener added)&nbsp; &nbsp; console.log(this)//...您创建一个引用数据对象的变量，您可以使用以下方法执行相同的操作this.el：var el = this.el;this.el.addEventListener('click', function() {&nbsp; &nbsp; el.doSomething();或使用 lambda，它不会改变范围：this.el.addEventListener('click', e => {&nbsp; &nbsp; this.el.doSomething();2) value does not match typevec3需要一个向量：{x: 10, y: 10, z: 10}而不是一个字符串10 10 10