ReferenceError: event is not defined in Firefox

Question

I am using this function:

$("#tooltip").animate({ left: event.clientX, top: event.clientY });

Its working on Chrome and IE but in Firefox I get this error:

ReferenceError: event is not defined $("#tooltip").animate({ left:
event.clientX, top: event.clientY });

How can i solve this?

Answer 1

You appear to be trying to use the odd global event object that is a legacy of the 4.0-browser-era Microsoft event model. Don't. Use the standard event object instead. It will be the first argument to your event handler function.

jQuery('selector').on('click', function (evt) {
    jQuery("#tooltip").animate({ left: evt.clientX, top: evt.clientY });
});

Answer 2

Mothana, Quentin is right,almost. I work with d3.js (jQuery like library) and the old story browser thing is that events that are not declared are not acceptable. So you have 3 weays to solve this:

1. Don't use events - not our case i think.

2. Use the standard event object of your function - Example in Quentin's answer.

3. Make your javascript library object do the work for you. Example in d3.js:
I had this not working code:

    tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px"))

and i used the d3.js object named "d3" to make the selection of the event for me (working code):

tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px")

So I suppose in jQuery you must use the name of your javascript library object, something like jQuery.someSelection().