Imposing functions onto document.body.onmousemove

My last post went over how to handle onscroll with window.onscroll and adding an additional function to an existing function. Well with document.body.onmousemove there is a bit of a problem with Firefox.

In order for the script to work you need to determine if a value already exists. This is where the problem lies with FF. To get the value, the only way to do it that I know works is…

if (document.body.getAttribute("onmousemove")) { }

Once you have that going you can simply do the same but… but it requires a bit more work sadly.

As with the previous example in the last post, with onscroll, you always need to have it referenced as

function() { /* your code */ }

In IE and most other browseres, besides FF, the returned code will always be treated as an anyomous function. Meaning when you call back document.body.onmousemove it is treated as a function which requires you to call…. document.body.onmousemove(), in FF it is returned as document.body.onmousemove without the () so the next part of this puzzle is to determine the browser type. In this case I tested for FF by using the following…

if (navigator.userAgent.indexOf("Firefox")!=-1) {
 //FF code
} else {
 //Non-FF code
}

The final result of combing these methods is:

if (document.body.getAttribute("onmousemove")) {
   var MouseMoveCode = eval(document.body.onmousemove);
   if (navigator.userAgent.indexOf("Firefox")!=-1) {
      var MouseMoveEvent = function(event) {
         dragDiv(event,CustomControls.OverlayMenu.MouseMoveCode)};
         document.body.onmousemove = MouseMoveEvent;
   } else {
      MouseMoveEvent = function(event) {
      dragDiv(event,MouseMoveCode())};
      document.body.onmousemove = MouseMoveEvent;
   }
} else {
   document.body.onmousemove = function(event) { dragDiv(event) };
}