Question

I’m trying to create a simple extension that alerts the mouse click (mouseup) coordinates every time a button is clicked. (A learning attempt)

The extension is working alright and is setup right, except for one glitch.

My XUL file :

<?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>

My JS file :

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

The issue, when I click anywhere in the document, or anywhere in the window except my extension button, the TEST alert command alerts the right coordinates.

However, when I click my button, (which is to trigger the alert command again),
the first TEST alert returns the right coordinates.

BUT, the main alert, alerts (not yet clicked, not yet clicked).

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

Answer 1

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

It is not reset, it was never set.

---

The problem

Inside the event handler, this refers to window, not to mouseClick. The handler is not called in the context of the object because you are directly binding it to window.

Meaning, inside the function, this._x = x; is the same as window._x = x;. myClick._x is never changed.
Later when you call mouseClick.display(), this inside that function refers to mouseClick and will alert the initial value.

A function is just like any other value. Assigning it to a property of an object does not magically bind it to that object. What this refers to is determined when the function is called, not when it is created.

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

---

The solution

You can explicitly bind the handler to mouseClick using .bind ^[MDN]:

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

Or alternatively pass a function which in turn calls mouseClick.handler:

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