javascript - A-Frame:在 EventListener 中缩放 a-box:“this.el is undefined”
问题描述
我想在 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`
解决方案
1) this.el is undefined
。
这是一个范围问题。this
不引用同一个对象:
//....
init: function() {
// here this refers the component object
console.log(this)
this.el.addEventListener('event', function() {
// here this refers to this.el (as the object which has the listener added)
console.log(this)
//...
您创建一个引用数据对象的变量,您可以这样做
this.el
:
var el = this.el;
this.el.addEventListener('click', function() {
el.doSomething();
或使用不会改变范围的 lambda:
this.el.addEventListener('click', e => {
this.el.doSomething();
2)value does not match type
vec3
需要一个向量:{x: 10, y: 10, z: 10}
而不是字符串10 10 10
推荐阅读
- android - 无法将上下文传递给非活动类?
- configuration - TYPO3 - 我需要将脚本文件放在哪里@imported
- spring-boot - Spring Boot 中的 Logback logstash 基本身份验证
- spring-boot - 如何在我的 Spring Boot 测试中启用 jdbc 模板
- nunit-3.0 - 对于TestCase如何设置一个Property?
- javascript - .eslint 文件的解释
- swift - 用 Swift 中的派生类嵌套类型解决歧义
- python - 如何将我的邻接矩阵转换为表示为数组类型 numpy.ndarray 的距离矩阵?
- angular - Angular HttpClient 在正文中使用 JSON 发出 GET 请求
- javascript - Firebase 云函数 - 返回未定义、预期的 Promise 或值