Javascript - e (event) 在 Firefox 中是未定义的

Javascript - e (event) is undefined in firefox

本文关键字:Firefox 未定义 event Javascript      更新时间:2023-09-26

我收到一个错误:在 Firefox 上运行我的 JavaScript 滑块代码时e is undefined。在Chrome上,它就像一个魅力。

我寻找了一个答案,并找到了一些帖子和答案(即使是这个:Windows.event 是未定义的 -Firefox 中的 Javascript 错误)

然而,我没有成功地在我的代码中实现这个解决方案,而且得到了更多的e is undefined错误。想得到如何解决它的建议。

我的js代码:(专注于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);
})();

更新1:使用Firefox错误的界面时,它说e is undefined并指出下一行: if(e.pageX || e.pageY){

提前谢谢。

将您的处理程序更改为此...

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';
 });

然后更改函数以接收事件对象作为第一个参数。

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;

试试这个:

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