我正在创建一个对象，该对象本身创建了一个与一些事件相关联的对象。 当事件被激发时，我想改变顶部对象的一个属性。
下面是我正在处理的interact.js问题的MWE:
null
function MyObject() {
this.attribute = 0
function onMove(event) {
this.attribute = 1;
}
const draggable = interact('#draggable')
draggable.draggable({
onmove: onMove
})
}
let testObject = new MyObject()
document.querySelector('#draggable').addEventListener('click', () => {
document.querySelector('#result').innerHTML = testObject.attribute;
});#draggable {
width: 200px;
height: 200px;
border: 1px dotted gray;
}<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<div id="draggable">
draggable
</div>
Result: <span id="result"></span>null
结果总是为0，再多的拖动也不会将其改变为1。
我知道问题就出在这里:
function onStart(event) {
this.attribute = 1;
}
this是我认为不正确的，但我不知道如何引用MyObject的属性。
您可以像这样绑定this:
draggable.draggable({
onmove: onMove.bind(this)
})
这是一种方法:
function createObject () { // Use a regular function
var attribute = 0 // Create a "private variable"
function onMove(event) {
attribute = 1;
}
const draggable = interact('#draggable')
draggable.draggable({
onmove: onMove
})
return { // Return an object...
get attribute () { // ...with an "attribute" property with only a getter...
return attribute // ...that returns the attribute
}
}
}
let testObject = createObject()
document.querySelector('#draggable').addEventListener('click', () => {
// Acess testObject.attribute like you would a normal property
document.querySelector('#result').innerHTML = testObject.attribute;
// testObject.attribute cannot be changed from outside
});
