首页 文章

Firebug：“事件未定义”

提问于
浏览 次
0

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

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画布'事件鼠标：

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

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

javascript events

3 回答

  • 0

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

    回复于
  • 0

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

    如果你使用 function alertx(event) 它应该工作 .

    回复于
  • 3

    让我们看看几个问题：

    • alertx() 未收到 event 参数 .

    • 在该函数中，您使用 this 调用 getMouseXY . 此时此关键字将引用触发事件的元素 .

    • 您正在将事件处理程序绑定到未知的 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);

    Edit: 在回复您的评论时，您只需要知道如何设置上下文（ this 关键字） implicitly ：

    当您调用实例方法时：

    obj.method();

    method 中的 this 关键字将引用 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来设置上下文 explicitly .

    回复于

相关问题