Function in mouseover event does not work in Firefox

Question

I have a Javascript function that is enabled through the event onmouseover in a table with records, the field changes color when I move the mouse, so it’s okay the problem is that it only works in the browsers IE and google Chrome, already in Mozilla it does not work what I do?

onmouseover="mOvr(this,'#A8A8A8');"

function mOvr(src, clrOver) {
    if (!src.contains(event.fromElement)) {
        src.bgColor = clrOver;
    }
}

Answer 1

This is an old known bug. The problem is that Firefox does not use event.fromElement (nor .toElement) and the others don’t use event.relatedTarget that Firefox uses... so you have to detect this Feature and adapt the code and compare if the event.relatedTarget and the event.target are the same. You can take a look at the jQuery source code.

You could use a function like this to fix that:

function fix(event) {
    if (event.type == 'mouseenter') {
        event.fromElement = event.relatedTarget;
    }
    if (event.type == 'mouseleave') {
        event.toElement = event.relatedTarget;
    }
}

But seeing that you have !src.contains(event.fromElement) I assume you want this behavior only in mouseenterof src (that is to say src does not contain the element where the mouse came from), so I think you should really use the onmouseenter="" and if you want to replace, using the onmouseleave. Something like this: http://jsfiddle.net/far4q1ja/

But the sensible thing would be to use CSS for mousehover purposes... if you can go that way and give CSS classes to those elements so you can write rules in the CSS file.

PS: The mistake you mentioned ReferenceError: event is not defined scripts.js:8:8 is why you’re wearing event inside the function without having passed an argument with that name. So you have to define the function with that parameter:

function mOvr(src, clrOver, event) {

and then in inline use onmouseover="mOvr(this,'#A8A8A8', event);".

Answer 2

I did so worked out, only that there is no way to pass the event parameter.

function mOvr(obj,color) {
    obj.style.backgroundColor = "#A8A8A8";
}