javascript - 为什么每次我单击工具栏按钮时我的 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);

问题是，当我单击文档中的任何位置或窗口中除扩展按钮之外的任何位置时，TEST 警报 命令会提醒正确的坐标。

但是，当我单击按钮(再次触发警报命令)时，第一个测试警报返回正确的坐标。

但是，主要警报，警报(尚未点击，尚未点击)。

为什么每次我单击扩展程序的按钮时，我的 mouseClick 对象都会重置？

Answer 1

Why is my mouseClick object getting reset everytime I click my extension's button?

它没有重置，它从未设置过。

<小时/>

问题

在事件处理程序中，this 指的是 window，而不是 mouseClick。处理程序不会在对象的上下文中调用，因为您直接将其绑定(bind)到 window。

意思是，在函数内部，this._x = x;与window._x = x;相同。 myClick._x 从未改变。
稍后，当您调用 mouseClick.display() 时，该函数内的 this 会引用 mouseClick 并会提醒初始值。

函数就像任何其他值一样。将其分配给对象的属性并不会神奇地将其绑定(bind)到该对象。 this 所指的内容是在调用函数时确定的，而不是在创建函数时确定的。

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

<小时/>

解决方案

您可以使用 .bind ^[MDN] 将处理程序显式绑定(bind)到 mouseClick :

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

或者传递一个函数，该函数依次调用mouseClick.handler:

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