萤火虫： “没有定义事件”

我有这些方法的构造：萤火虫： “没有定义事件”

  
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代码i中alertx功能分配给一个HTML5画布事件MouseUp：

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

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

来源

2009-12-08 Gabriel A. Zorrilla

让我们看看几个问题：

的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);

编辑：在回答您的意见，你只需要知道如何在上下文（this关键字）设置隐含：

当你调用像一个实例方法：

obj.method();

的method内的this关键字，将参考到obj。

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

globalFunction();

等同于：

window.globalFunction();

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

var instance = new MyConstructor();

在这种情况下的this关键字将是一个新对象，通过使用new运营商的创建：

另一种情况，当你使用new操作发生。

当你使用一个函数作为事件处理程序，该this关键字将参考元素塔触发事件：

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

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

最后，因为你在我的代码所看到的，上下文可以通过使用call或apply设置明确。

来源

2009-12-08 19:08:47 CMS

惊人的人，谢谢！.call解决了这个问题，我会更多地了解它，我有一个构造函数，这些函数是它的方法，这种情况下原型的优点是什么？ – 2009-12-08 19:50:27

Humm。我修改了代码以使其符合原型模型（构造函数，通过原型添加方法，您的第二种情况），并且我得到了“this.getmouseXY is undefined”。 – 2009-12-17 01:01:53

@Gabriel：您可以发布代码，在你的问题或http://jsbin.com？ – CMS 2009-12-17 01:38:10

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

来源

2009-12-08 18:22:36 Matt

我只是使用事件，使clientY和clientX功能工作，不是因为我想这么... :(不知道如何处理它在alertx内 – 2009-12-08 19:01:50

函数中的alertx事件从未初始化。

如果您使用function alertx(event)它应该工作。

来源

2009-12-08 18:23:15 stimpie

这样做会呈现另一个错误，this.getMouseXY不是一个功能... – 2009-12-08 18:48:14

萤火虫： “没有定义事件”

回答

相关问题