我知道这不应该是内联的,但是YUI库的对话框迫使我这样做。我的问题是,每当我将鼠标悬停在这个div上时,边距左侧滚动被激活但是当我将鼠标移出div时它不会停止。 JS控制台报告:
未捕获的ReferenceError:未定义timerID
这是代码:
<div class="span1" onmouseover="
var timerID;
$(document).ready(function(){
timerID = setInterval(scrollLeft, 10);
function scrollLeft(){
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
});
" onmouseout="clearInterval(timerID)">
</div>
编辑:问题是我不能在对话框中运行SCRIPT标签(它们已经通过脚本创建,除了内联之外的任何javascript,如onmouseover和onmouseout)。因此,在单一函数中封装onmouseover和onmouseout句柄的建议在这种情况下不起作用。
答案 0 :(得分:4)
这是一个范围问题。变量timerID
在onmouseout中不可见。
通常,将内容放入函数而不是将其全部包含在属性中是一个好主意。这避免了所有这些范围问题。使用处理程序而不是on-...
- atrributes是一个更好的主意。
在onmouseover
属性之外定义您的函数,并调用mouseout
中的另一个函数来清除它。
这样的事情(为了避免令人讨厌的全球变数)
var handler = (function(){
var timerID;
function scrollLeft(){
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
return{
mouseover:function(){
timerID = setInterval(scrollLeft, 10);
},
mouseout:function(){
clearInterval(timerID);
}
}
})();
然后
<div class="span1" onmouseover="handler.mouseover()" onmouseout="handler.mouseout()">
甚至更好,直接通过以下方式绑定处理程序:
$('.span1').hover(function() {
timerID = setInterval(scrollLeft, 10); //mouseover
}, function() {
clearInterval(timerID); //mouseout
});
从新的jQuery 1.7开始,.on()
应该是首选。
答案 1 :(得分:2)
$(document).ready(function() {
var timerID = null;
function scrollleft() {
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
$('div.span1').hover(function() {
timerID = setInterval(scrollLeft, 10);
}, function() {
clearInterval(timerID);
});
});
让你像HTML一样
<div class="span1"></div>
如果您使用.on('hover')
,那么
$(document).ready(function() {
var timerID = null;
function scrollleft() {
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
$('div.span1').on('hover', function(e) {
if(e.type == 'mouseenter') {
timerID = setInterval(scrollLeft, 10);
} else {
clearInterval(timerID);
}
});
});
答案 2 :(得分:1)
混淆标记和JavaScript是不好的。拆分它们并按如下方式单独工作。
HTML:
<div class="span1"></div>
JavaScript的:
var timerID = null;
function scrollLeft() {
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
$(document).ready(function() {
$(".span1").hover(function() {
timerID = setInterval(scrollLeft, 10);
}, function() {
clearInterval(timerID);
});
});
答案 3 :(得分:1)
timerID在onmouseover中定义,但不在onmouseout中定义。
所以你可以做的是:
<script type="text/javascript">
var scrollLeft = function(){
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
};
var timerID;
$(document).ready(function(){
$("#timer").mouseover(function() {
timerID = setInterval(scrollLeft, 10);
}).mouseout(function() {
clearInterval(timerID)
});
});
</script>
<div class="span1" id="timer"> </div>
答案 4 :(得分:0)
您
var timerID;
变量被定义为onmouseover
处理程序中的局部变量,因此onmouseout
处理程序不知道它。
将其声明为全局变量,或更好 - 将其封装到一个对象中,该对象将包含timerID
作为字段,mouseover
和mouseout
处理程序作为方法。