开发者问题收集

在类中使用 JavaScript 的 onmouseover 事件时出现问题

2015-08-03
81

今天早些时候,我得到了一些简单的代码,允许鼠标悬停时图像滑过,并决定尝试将其转换为类,以便我可以实例化它。但是,我遇到了一些问题。

在窗口加载时调用 init(),这将 shifttabout() 设置为在鼠标悬停在图像上时调用的函数。但是,当调用 shifttabout() 时,我收到以下错误:“this.movetabout 不是函数。”怎么会这样?

   <script type="text/javascript">

        function SlidingTab(img)
        {
            this.self = this;

            this.outtimer;
            this.intimer;

            this.left = 0;
            this.interval = 20;
            this.animatingout = false;
            this.animatingin = false;
            this.increment = 10;
            this.extenddist = 100;
            this.imgobj = img;


            this.movetabout = function(){
                alert("moveout");
                this.animatingout = true;
                this.left = parseInt(this.imgobj.style.left);

                if(this.left != this.extenddist)
                {
                    this.imgobj.style.left = this.left + this.increment + 'px';

                    this.self = this;
                    this.outtimer = setTimeout(this.self.movetabout, this.interval);
                }
                else
                {
                    this.animatingout = false;
                }
            };

            this.shifttabout = function(){
                alert("shiftout");
                if(this.animatingin)
                {
                    this.animatingin = false;
                    clearTimeout(this.intimer);
                }
                if(!this.animatingout)
                {
                    this.movetabout();
                }   
            }

            this.init = function(){
                this.imgobj.style.position = 'relative';
                this.imgobj.style.left = '0px';

                this.self = this;

                this.imgobj.onmouseover=this.self.shifttabout;
            }
        }

        function init(){
            var img1 = document.getElementById("tab1");
            var tab1 = new SlidingTab(img1);
            tab1.init();
        }

        window.onload = init;

    </script>

大概是我以某种方式错误地设置了 onmouseover 函数,因为当通过鼠标悬停调用 shifttabout() 时,所有类变量似乎都未定义或以其他方式弄乱了,但当直接通过 init() 调用时 不是

2个回答

您的问题似乎是由这些行引起的。您的思路正确,因为您需要正确设置函数的上下文。

this.self = this;

this.imgobj.onmouseover=this.self.shifttabout;

将其更改为以下内容应正确设置上下文

this.imgobj.onmouseover=this.shifttabout.bind(this);

#bind(this) 将函数内部 this 的范围设置为您传递给它的输入(在本例中为当前范围)

PhilVarg
2015-08-03

您在 shifttabout 中使用的 this 指的是 shifttabout this - 而不是 SlidingTab this

您应该将 shifttabout 外部所需的变量传递到其中,以便正确使用它们。

希望有所帮助。

itamar
2015-08-03