September 23, 2012

Understanding parameter 'e' and e.pageX/e.pageY

Question by user1692159

function smtMouseMove(e){
    smtMouseCoordsX=e.pageX;
    smtMouseCoordsY=e.pageY;
    smtTipPosition();
}

function smtTipPosition(e){
    var thePosX=e.pageX+20;
    smtTip.css("left",thePosX);

    var thePosY=smtMouseCoordsY+20;
    smtTip.css("top",thePosY);

}

If I have this: var thePosX=e.pageX+20; I gat the error that parameter e is undefined. But if I write var thePosX=smtMouseCoordsX+20; everything is ok. What do I miss in here?

Answer by Starx

On your function declaration, you are asking a parameter e to be sent.

function smtTipPosition(e) {}

But, you are not sending the parameter on your execution.

function smtMouseMove(e){
    smtMouseCoordsX=e.pageX;
    smtMouseCoordsY=e.pageY;
    smtTipPosition();
               // ^ Right here, you have to send the parameter 'e' too
}

Implementing something like this, should fix the problem.

function smtMouseMove(e){
    smtTipPosition(e);
}

function smtTipPosition(e){
    var thePosX=e.pageX+20;
    smtTip.css("left",thePosX);

    var thePosY=smtMouseCoordsY+20;
    smtTip.css("top",thePosY);

}

Generally, e refers to an event object. It has to be initiated or passed on by some event or function. On you case also, function setMouseMove and smtTipPosition both require a event object for its execution.

Lets see a simple example

$("a").click(function(e) {
    //Here `e` will hold the event object of the page, when any `a` on the page will be clicked
    console.log(e.pageX); //Calling this will give the x coordinates of mouse position on the page, when the `a` was clicked
});

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!