Question

I am trying to do this:

$("#canvasDiv").mouseover(function() {
    var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
    var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
    $(".filler").text("( e.pageX, e.pageY ) : " + pageCoords);
    $(".filler").text("( e.clientX, e.clientY ) : " + clientCoords);
});

and in the console I get this:

Uncaught ReferenceError: e is not defined

I don’t understand… I thought e is supposed to be a variable that JavaScript has already set…help?

Answer 1

Change

$("#canvasDiv").mouseover(function() {

to

$("#canvasDiv").mouseover(function(e) {

True, the first parameter to the callback is pre-defined, but in order to use it you must alias it through an argument name. That’s why we specify e as the argument. In fact, it’s not required that the argument name is e. This will work too:

$('#canvasDiv').mouseover(function( event ) {

});

But you must alias the event object through the name event in the function callback.