爲什麼每次我點擊我的toolbarbutton時，我的javascript變得不確定？

Question

我想創建一個簡單的擴展，每次點擊一個按鈕時提醒鼠標點擊（mouseup）座標。 （學習嘗試）

擴展工作正常，設置正確，除了一個小故障。

我的XUL文件：

<?xml version="1.0"?> 

    <?xml-stylesheet type="text/css" href="chrome://global/skin/" ?> 
    <?xml-stylesheet type="text/css" 

href="chrome://mouseclick/skin/mouseclick.css" ?> 

<!DOCTYPE overlay SYSTEM 
    "chrome://mouseclick/locale/mouseclick.dtd"> 

<overlay id = "overlay-id" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
    <script type="application/x-javascript" 
    src="chrome://mouseclick/content/mouseclick.js" /> 

    <toolbarpalette id="BrowserToolbarPalette"> 
    <toolbarbutton id="mouseclick-button" class="mouseclick-class" 
        label="&button.label;" tooltiptext="&tooltip.text;" 
        oncommand = "mouseClick.display();"/> 
    </toolbarpalette> 
    <toolbar id="nav-bar"> 
    <toolbarbutton id="mouseclick-button" class="mouseclick-class" 
        label="&button.label;" tooltiptext="&tooltip.text;" 
        oncommand = "mouseClick.display();"/> 
    </toolbar> 
</overlay> 

我的JS文件：

if(mouseClick === undefined) { 
    var mouseClick = { 
    _x : "not yet clicked" , 
    _y : "not yet clicked" 
    }; 
} 

mouseClick.handler = function(e) { 
    var x = e.pageX !== undefined ? e.pageX : e.clientX; 
    var y = e.pageY !== undefined ? e.pageY : e.clientY; 
    /*A TEST ALERT 
    alert("(" + x + ", " + y + ")"); // a dummy command for testing 
    */ 
    this._x = x; 
    this._y = y; 
}; 

mouseClick.display = function() { 
    alert("(" + this._x + ", " + this._y + ")"); 
}; 

window.addEventListener("mouseup", mouseClick.handler, false); 

問題，當我在文檔中的任意位置單擊，或任何地方的窗口，除了我的擴展按鈕，測試警報命令提醒正確的座標。

然而，當我點擊我的按鈕，（這是再次觸發警報命令）， 第一測試警報返回正確的座標。

，但在主要警報，提醒(not yet clicked, not yet clicked)。

爲什麼我的mouseClick對象每次點擊我的分機按鈕時都會重置？

Answer 1

爲什麼我的鼠標點擊對象每次點擊我的分機按鈕時都會重置？

它不會被重置，它從來沒有設置。

---

問題

在事件處理器，this指window，而不是mouseClick。處理程序不在對象的上下文中調用，因爲您直接將其綁定到window。

含義，在函數內部，this._x = x;與window._x = x;相同。 myClick._x從不改變。
稍後當您撥打mouseClick.display()時，this裏面的那個功能指的是mouseClick，並且會提醒初始值。

函數就像任何其他值一樣。將它分配給對象的屬性並不會神奇地將其綁定到該對象。什麼this是指當功能是時調用，而不是當它被創建時。

MDN explains this very well和quirksmode.org explains it in the light of event handlers。

---

解決方案

您可以將處理程序顯式綁定到mouseClick使用.bind^[MDN]：

window.addEventListener("mouseup", mouseClick.handler.bind(mouseClick), false); 

或可選擇地傳遞一個函數，後者又調用mouseClick.handler：

window.addEventListener("mouseup", function(event) { 
    mouseClick.handler(event); 
}, false);