在类中使用 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