Javascript-e（事件）在firefox中未定义

Question

I got an error: e is undefined on my javascript slider code when running it on Firefox. On Chrome it works like a charm.

I've looked for an answer and found some posts and answers (even this one: Windows.event is undefined -Javascript error in firefox )

However , I didn't succeed to implement that solution in my code and allways got more e is undefined errors. Would like to get an advice of how to solve it.

My js code: (Focusing on the this.sliderMove function )

(function(){
    function reallyNiceSlider(obj){
        /* From how far the mouse starts affecting the item? in pixels */
        this.range = {min: 2, max: 200};
        /* how smooth would the transition be? Every step is another call of the interval function before getting to the final goal */
        this.steps=5;
        /* A variable to hold the index of our interval function */
        this.t=-1;
        /* 2 dimensional array: targets[i][0] = goal width of object; targets[i][1] = step size; targets[i][2] = the object; targets[i][3] = saving the width of the object; targets[i][4] = Width when mouse is out of range */
        this.targets = new Array();
        /* The object of the slider */
        this.slider = obj;
        /* max and min sizes */
        this.values = {min: 80, max: 130}
        /* safe range */
        this.safe = 0;

        this.sideMargin = 3;

        this.init = function(){
            var children = this.slider.getElementsByTagName('a');
            var selectedObj = null;

            for(var i = 0; i < children.length; i++){
                if(children[i].className == 'selected')
                        selectedObj = children[i];
                children[i].getElementsByTagName('img')[0].style.width = this.values.min + 'px';
                this.targets[i] = Array(-1, 0, children[i], this.values.min, -1);
            }

            if(selectedObj)
                this.sliderPick();
        }

        this.truePosition = function(obj){
            var x=obj.offsetWidth/2, y=obj.offsetHeight/2;
            do{
                x += obj.offsetLeft;
                y += obj.offsetTop;

            }while(obj = obj.offsetParent);

            return {x:x,y:y};
        }


        this.sliderMove = function(obj){
            var e = window.event;
            var range = obj.range;
            var offset, cursor={x:0,y:0}, diff={x:0,y:0,total:0,ratio:0}, opacity, max = range.max+obj.safe, child;
            var selectedObj = null;

            if(e.pageX || e.pageY){
                cursor.x = e.pageX;
                cursor.y = e.pageY;
            }
            else{
                cursor.x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                cursor.y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
            }

            for(var i=0; i < obj.targets.length; i++){
                child = obj.targets[i];
                offset = obj.truePosition(child[2].getElementsByTagName('img')[0]);
                diff.x = cursor.x > offset.x ? cursor.x - offset.x : offset.x - cursor.x;
                diff.y = cursor.y > offset.y ? cursor.y - offset.y : offset.y - cursor.y;
                diff.total = Math.sqrt(diff.y*diff.y + diff.x*diff.x);
                if(diff.total < max){
                    max = diff.total;
                    diff.ratio = diff.x / diff.total;
                }

                if(child[2].className == 'selected')
                    selectedObj = child[2];
            }

            if(max <= range.max){

                for(var i=0; i < obj.targets.length; i++){
                    child = obj.targets[i];
                    offset = obj.truePosition(child[2].getElementsByTagName('img')[0]);
                    diff.x = cursor.x > offset.x ? cursor.x - offset.x : offset.x - cursor.x;
                    diff.y = cursor.y > offset.y ? cursor.y - offset.y : offset.y - cursor.y;
                    diff.total = Math.sqrt(diff.y*diff.y + diff.x*diff.x);
                    if(diff.total > range.max) diff.total = range.max;

                    if(diff.total < range.min) diff.total = 0;
                    child[0] = parseInt( obj.values.max - ((diff.total/range.max) * (obj.values.max - obj.values.min) ));
                    if(child[0] > obj.values.max) child[0] = obj.values.max;
                    child[1] = (child[0] - child[3])/this.steps


                    obj.targets[i] = child;
                }

                if(this.t < 0)
                    obj.makeInterval(obj);
            }
            else if(selectedObj && max >= range.max+(obj.safe * diff.ratio))
                obj.sliderPick();

        }

            this.findSize = function(range_obj){
            var range = this.range, values = this.values;
            if(range_obj > range.max) return values.min;

            var range_edge = range.max - range_obj;

            var size_at_point = (values.max - values.min) * ( range_edge / range.max);

            return (range_edge / ((range_edge / size_at_point) + 1)) + values.min;
        }

        this.sliderPick = function(){
            var e = window.event;
            var range = this.range;
            var offset, cursor={x:0,y:0}, diff={x:0,y:0,total:0}, opacity, child;
            var selectedObj;
            var difference = {init: 0, cumulative: 0}, j;

            if(this.safe == 0){
                for(j=0; j < this.targets.length; j++){
                    child = this.targets[j];
                    if(child[2].className == 'selected'){
                        child[0] = this.values.max;
                        child[4] = child[0];
                        child[1] = (child[0] - child[3])/ this.steps;
                        difference.init = (child[0] / 2) + this.sideMargin;
                        this.safe = (child[0] - child[3]) / 2;

                        cursor = this.truePosition(child[2].getElementsByTagName('img')[0]);
                        break;
                    }
                }

                difference.cumulative = difference.init;
                for(var i=j+1; i < this.targets.length; i++){
                    child = this.targets[i];

                    child[0] = parseInt( this.findSize(difference.cumulative) );
                    child[4] = child[0];
                    difference.cumulative += child[0] + this.sideMargin;

                    child[1] = (child[0] - child[3])/this.steps;
                    this.safe += (child[0] - child[3]) / 2;
                }

                difference.cumulative = difference.init;
                for(var i=j-1; i >= 0; i--){
                    child = this.targets[i];

                    child[0] = parseInt( this.findSize(difference.cumulative) );
                    child[4] = child[0];
                    difference.cumulative += child[0] + this.sideMargin;

                    child[1] = (child[0] - child[3])/this.steps;
                    this.safe += (child[0] - child[3]) / 2;
                }

            }
            else{
                for(var i=0; i < this.targets.length; i++){
                    child = this.targets[i];

                    child[0] = child[4];
                    child[1] = (child[0] - child[3])/this.steps

                    this.targets[i] = child;
                }
            }

            if(this.t < 0)
                this.makeInterval(this);
        }

        this.makeStep = function(obj){
            var target, diff, sliderOffset = this.slider.offsetHeight, done=0;

            for(var i = 0; i < obj.targets.length; i++){
                target = obj.targets[i];

                if(target[0] < 0) continue;
                done = 1;
                if(target[1]*target[1] >= (target[0] - target[3])*(target[0] - target[3])){
                    target[3] = target[0];
                    target[0] = -1;
                }
                else
                    target[3] = target[3] + target[1];

                target[2].getElementsByTagName('img')[0].style.width = Math.round(target[3]) + 'px';
                target[2].getElementsByTagName('img')[0].style.marginTop = Math.round( ( sliderOffset - target[2].getElementsByTagName('img')[0].offsetHeight ) / 2 ) + 'px';
                opacity = parseInt(100* (target[3] / this.values.max) );

                target[2].style.opacity=opacity/100;
                target[2].style.filter='alpha(opacity=' + opacity + ')';
            }

            if(done == 0){
                clearInterval(obj.t);
                obj.t = -1;
            }
        }

        this.makeInterval = function(obj){
            obj.t = setInterval(function(){obj.makeStep(obj)}, 40);
        }

        this.init();
    }

    function reallyNice_slider_init(){

        jQuery('.reallyNice_slider').each(function(){
                                    var slider = new reallyNiceSlider(this);

                                    if(document.addEventListener)
                                        document.addEventListener('mousemove', function(){slider.sliderMove(slider)}, false);
                                    else
                                        document.attachEvent('onmousemove', function(){slider.sliderMove(slider)});

                                    this.style.visibility = 'visible';
                                     });
    }

    if(window.addEventListener)
        window.addEventListener('load', reallyNice_slider_init, false);
    else
        window.attachEvent('onload', reallyNice_slider_init);
})();

UPDATE 1: When using the Firefox error's interface it says e is undefined and points the next line: if(e.pageX || e.pageY){

Thanks in advance.

Answer 1

Change your handlers to this...

jQuery('.reallyNice_slider').each(function(){
    var slider = new reallyNiceSlider(this);

    if(document.addEventListener)
        document.addEventListener('mousemove', 
                                  function(e){
                                    slider.sliderMove(e, slider)
                                  }, false);
    else
        document.attachEvent('onmousemove', 
                             function(){
                               slider.sliderMove(window.event, slider)
                             });

    this.style.visibility = 'visible';
 });

Then change your functions to receive the event object as the first argument.

this.sliderMove = function(e, obj){
  //var e = window.event;  // remove this
    var range = obj.range;
    var offset, cursor={x:0,y:0}, diff={x:0,y:0,total:0,ratio:0}, opacity, max = range.max+obj.safe, child;
    var selectedObj = null;

Answer 2

Try this:

this.sliderMove = function (obj) {
    var e = obj.event || window.event;
    ...