带有参数的Javascript事件处理程序

Javascript event handler with parameter

本文关键字:事件处理 程序 Javascript 参数      更新时间:2023-09-26

我正在尝试为svg元素设置onmousemove事件。下面的代码在chrome中工作,但在firefox中,它并没有每次都正确设置onmousemove属性。在第二次换人之后,情况变得一团糟。

mysvg.setAttribute('onmousemove','window.updateXY(evt,' + that.chartNumber + ')');

根据firebug,mysvg仍然是正确的svg元素:svg#chart0

svg属性onmousemove在出错时说的是函数(e)而不是onmousemove(evt),但firebug 中没有错误报告

编辑后显示更多代码:

var YAxis = function(mysvg,chartNumber){
            this.chartNumber = chartNumber;
            var that = this;
            var g = document.createElementNS(xmlns, "g");
            this.id = 'YAxis' + chartNumber;
            g.id = this.id;
            mysvg.appendChild(g);
            var shift = false;
            this.selected = false;

            this.yScale = function(e){
                e.stopPropagation();
                that.origY = e.pageY;
                that.shift = e.ctrlKey;
                mysvg.onmousemove = that.dragY;
                mysvg.onmouseup = that.dropY;
            }
            this.dragY = function(e) {
                var chart = charts[that.chartNumber];
                if(chart.log)
                    displayXYText.innerHTML = 'range: ' + Math.round(Math.pow(10,chart.max*(1 + (e.pageY - that.origY)/(chart.height)))*100)/100  + '-' + Math.round(Math.pow(10,chart.min*(1 - (e.pageY - that.origY)/(chart.height)))*100)/100;
                else
                    displayXYText.innerHTML = 'range: ' + Math.round(chart.max*(1 + (e.pageY - that.origY)/(chart.height))*100)/100  + '-' + Math.round(chart.min*(1 - (e.pageY - that.origY)/(chart.height))*100)/100;
            }
            this.dropY = function(e) {
                var chart = charts[that.chartNumber];
                if(that.shift){
                    var range = (chart.max - chart.min)*Math.round((e.pageY - that.origY)/(chart.height)*1000)/1000;
                    chart.max += range;
                    chart.min += range;
                }else{
                    var range = chart.max - chart.min;
                    chart.max *= 1 + Math.round((e.pageY - that.origY)/(chart.height)*1000)/1000;
                    chart.min *= 1 - Math.round((e.pageY - that.origY)/(chart.height)*1000)/1000;
                    if(chart.max <= chart.min){
                        chart.max = chart.min + range;
                    }
                }

                mysvg.setAttribute('onmousemove','window.updateXY(event,' + that.chartNumber + ')');
                //mysvg.onmousemove = updateXY(e,that.chartNumber);//function() { updateXY(e,that.chartNumber)}; //set back to orig function
                //mysvg.setAttribute('onmousemove','updateXY(evt,' + that.chartNumber + ')');
                //console.debug(mysvg.onmousemove.textContent);
                mysvg.setAttribute('onmouseup','window.mouseUp(event)');
                //console.debug("got here onmousemove");
                chart.redraw();
            }

}

我尝试了上面所有的方法,但在firefox中没有一个能正常工作。解决方案是不将event以外的任何参数传递给updateXY函数。当其他参数未定义时,运行单独的逻辑来确定在这种情况下参数应该是什么。一旦代码进入window帧,就可以像往常一样使用setAttribute。#FirefoxOOPfail