在类中使用javascript的onmouseover事件的问题

Issue Using JavaScript's onmouseover Event Within a Class

本文关键字:onmouseover 事件 问题 javascript      更新时间:2023-09-26

今天早些时候,我得到了一些简单的代码来工作,允许图像在鼠标上滑动,并决定尝试将其变成一个类,以便我可以实例化它。但是,我遇到了一些问题。

init()在窗口加载时被调用,它将shifttabout()设置为鼠标在图像上移动时调用的函数。然而,当shifttabout()被调用时,我得到以下错误:move about不是一个函数。"这怎么可能呢?

   <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()调用。

您的问题看起来是由这些行引起的。你在正确的轨道上,因为你需要适当地设置你的功能的上下文。

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

更改为以下内容应该可以正确设置上下文

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

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

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

您应该将shifttabout外部所需的变量传递给它以正确使用它们。

希望对你有帮助。