螢火蟲：「沒有定義事件」

我有這些方法的構造：螢火蟲：「沒有定義事件」

  
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

螢火蟲： 「沒有定義事件」

回答

相關問題

螢火蟲：「沒有定義事件」