Question

我有一个使用这些方法的构造函数：

    
function getMouseXY(event){
        var x = event.clientX - this.offsetLeft;
        var y = event.clientY - this.offsetTop;
    return [x,y];
}

function alertx(){
    var c = this.getMouseXY(event);
    alert(c[0]);
}

在HTML代码中，我将alertx函数分配给HTML5画布'事件mouseup：

document.getElementById('cbackground').addEventListener('mouseup', object.alertx, false);

预期结果是什么？点击画布它显示鼠标的X位置，而不是什么都没有。使用Firebug进一步探索我的错误“事件未定义”。我不知道如何避免这种情况！有小费吗？谢谢！

Answer 1

让我们看看几个问题：

alertx()未收到event参数。
在该功能中，您使用getMouseXY致电this。此时此关键字将引用触发事件的元素。
您正在将事件处理程序绑定到未知的object变量。

我想你想做这样的事情：

function getMouseXY(event){
        var x = event.clientX - this.offsetLeft, // notice, 'this' is used
            y = event.clientY - this.offsetTop;

    return [x,y];
}

function alertx(event){
    var c = getMouseXY.call(this, event); // set the element as 'this'
    alert(c[0]);
}

如果你有一个构造函数，并且上面的函数是实例方法，你可以这样做：

function MyObject () {  // constructor
}

MyObject.prototype.getMouseXY = function (event) {
        var x = event.clientX - this.offsetLeft,
            y = event.clientY - this.offsetTop;

    return [x,y];
};

MyObject.prototype.alertx = function (event, element) {
    var c = this.getMouseXY.call(element, event); 
    alert(c[0]);
}

绑定事件时，您可以添加匿名函数来强制执行上下文：

var object = new MyObject();
document.getElementById('cbackground').addEventListener('mouseup', function (e) {
  object.alertx(e, this); // alertx will be called with the correct 'this'
}, false);

修改：在回复您的评论时，您只需知道上下文（this关键字）如何设置隐式：

当您调用类似的实例方法时：

obj.method();

this中的method关键字将引用obj。

当你调用全局变量时会发生同样的事情，因为它们是全局对象的成员（浏览器脚本中的window）：

globalFunction();

相当于：

window.globalFunction();

该函数内的上下文将是全局对象本身（window）。

使用new运算符时会发生另一种情况：

var instance = new MyConstructor();

在这种情况下，this关键字将是使用new运算符创建的新对象。

当您使用函数作为事件处理程序时，this关键字将引用触发事件的元素：

document.getElementById('myId').onclick = obj.myFunction;

在这种情况下，myFunction是obj的实例方法，但this关键字将引用已被点击的DOM元素。

最后，正如您在我的代码中看到的那样，可以使用call或apply 明确设置上下文。

Answer 2

在var c = this.getMouseXY(event);上，您将一个未分配的变量（事件）传递给该函数，这就是它爆炸的原因。也许你忘了将参数添加到alertx（）？

Answer 3

在函数alertx中，事件永远不会被初始化。

如果你使用function alertx(event)它应该有用。

Firebug：“事件未定义”

3 个答案: