JavaScript script doesn't work in Firefox

Question

I have an old function which is missing lines for Mozilla/Firefox and thus JavaScript is not working properly in it. The function tracks mouse-coordinates, so that I can position windows.

How to make the code work in Firefox as well?

Xoffset = -60; // modify these values to ...
Yoffset = 20; // change the popup position.
var old, skn, iex = (document.all),
    yyy = -1000;

var ns4 = document.layers
var ns6 = document.getElementById && !document.all
var ie4 = document.all

if (ns4) skn = document.dek
else if (ns6) skn = document.getElementById("dek").style
else if (ie4) skn = document.all.dek.style
if (ns4) document.captureEvents(Event.MOUSEMOVE);
else {
  skn.visibility = "visible"
  skn.display = "none"
}
document.onmousemove = get_mouse;


function popup(msg, bak) {
  var content = 
      "<TABLE  WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2" +
      "CELLSPACING=0 " + "BGCOLOR=" + bak + "><TD ALIGN=center>" + 
      "<FONT COLOR=black SIZE=2>" + msg + "</FONT></TD></TABLE>";
  yyy = Yoffset;
  if (ns4) {
    skn.document.write(content);
    skn.document.close();
    skn.visibility = "visible"
  }
  if (ns6) {
    document.getElementById("dek").innerHTML = content;
    skn.display = ''
  }
  if (ie4) {
    document.all("dek").innerHTML = content;
    skn.display = ''
  }
}

function get_mouse(e) {
  var x = (ns4 || ns6) ? event.pageX : event.x + document.body.scrollLeft;
  skn.left = x + Xoffset;
  var y = (ns4 || ns6) ? event.pageY : event.y + document.body.scrollTop;
  if (document.documentElement &&  // IE6 +4.01 but no scrolling going on
     !document.documentElement.scrollTop) {
    y = event.y + document.documentElement.scrollTop;
  }
  else if (document.documentElement && // IE6 +4.01 and user has scrolled
           document.documentElement.scrollTop) { 
    y = event.y + document.documentElement.scrollTop;
  }
  else if (document.body && document.body.scrollTop) { // IE5 or DTD 3.2
    y = event.y + document.document.body.scrollTop;
  }

  skn.top = y + yyy;
}

function kill() {
  yyy = -1000;
  if (ns4) {
    skn.visibility = "hidden";
  }
  else if (ns6 || ie4) skn.display = "none"
}

I am getting this error:

"event is not defined"

Works ok in IE.

Answer 1

I'm not going to post code on how to rewrite your code @Ivo Wetzel's is pretty much what you need, but let meg give you some advice.

1. The world is changing fast, so does the computer industry. And while sometimes it's not as fast as we want (IE 6 fading slowly) there is no need to support Netscape 4.

2. Consult with a site like StatCounter to find out what browsers are in use (in your country/region). Also consult with YUI graded browser support . Yahoo is one of the biggest players on the internet, their site has to work for almost everyone, so they know what they're talking about.

3. Find a good DOM reference. MDC is pretty much what you need, but it's good to have MSDN for IE quirks. Talking about quirks, don't forget to bookmark QuirksMode compatibility tables .

4. Never use things like ie4 = document.all , because a single feature won't identify a whole browser. It's like saying: "Hey you've got blonde hair, you must be Brad Pitt" . Use feature detection. Read these two excellent articles: Browser Detection (and What to Do Instead) and Feature Detection: State of the Art Browser Scripting

5. Don't use document.write because it's synchronous I/O which is awful. It blocks your page rendering and leads to bad user experience. The Web is all about being asynchronous .

"Synchronous programming is disrespectful and should not be employed in applications which are used by people." - Douglas Crockford

Answer 2

Oh my god... this must be the worst code I've seen in years, well let's try to clean it up then:

Xoffset = -60; // modify these values to ...
Yoffset = 20; // change the popup position.
var old, skn = document.getElementById("dek").style, yyy = -1000;

function popup(msg, bak) {
    var content = 
        "<TABLE  WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2" +
        "CELLSPACING=0 " + "BGCOLOR=" + bak + "><TD ALIGN=center>" + 
        "<FONT COLOR=black SIZE=2>" + msg + "</FONT></TD></TABLE>";

    yyy = Yoffset;
    document.getElementById("dek").innerHTML = content;
    skn.display = '';
}

document.onmousemove = function(e) {
    e = e || window.event;

    var x = e.pageX !== undefined ? e.pageX : e.clientX + document.body.scrollLeft;
    var y = e.pageY !== undefined ? e.pageY : e.clientY + document.body.scrollTop;
    skn.left = x + Xoffset;
    skn.top = y + yyy;
}

function kill() {
  yyy = -1000;
  skn.display = "none";
}

It's still broken beyond repair, but it should work... somehow.... Well, unless you post the rest of them HTML there's no way I can test this.

Please, I beg you... get rid of all that crap and use jQuery.

Answer 3

看来您需要将所有'event'实例更改为'e'。

Answer 4

Instead of testing for browsers, I would test to see if the object / property exists. For example:

var x = e.pageX ? e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 

I think there may be an easier way to do this, such as

var x = e.pageX || e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

but I'm not sure that will work. Test it out and see what you get. Also, for more detail, review: quirksmode.org/js/events_properties.html

Also note that I changed "event" to "e", since the parameter you're passing into the function is "e". If you want to still use event, rewrite the parameter to:

function get_mouse(event)

While I don't believe "event" is a reserved word for JS, a lot of browsers use it, so I would suggest sticking to "e".

Answer 5

Firefox includes document.documentElement and document.documentElement.scrollTop and document.body and document.body.scrollTop so you're entering regions that were meant for IE with Firefox.

You should also start your function with something like

function get_mouse(e) {
    e = e || window.event;

Then use e instead of event in all the places you use event .

Answer 6

添加var event = e的函数体的第一行，如果你害怕麻烦的function get_mouse(e) { var event = e;