4

我知道这不应该是内联的，但是 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 标记（它们已经通过脚本创建，除了像 onmouseover 和 onmouseout 这样的内联脚本之外，它们会过滤任何 javascript）。因此，在这种情况下，您将 onmouseover 和 onmouseout 句柄封装在单个函数中的建议将不起作用。

4

5 回答 5

6

这是一个范围问题。您的变量timerID在 onmouseout 中不可见。

通常，将内容放入函数中而不是将其全部放入属性中是一个好主意。这避免了所有这些范围问题。使用处理程序而不是-attributes 是一个更好的主意on-...。

在属性之外定义您的函数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()应该是首选。

于 2012-06-04T11:24:39.223 回答
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);
         }
    });
});
于 2012-06-04T11:24:46.847 回答
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);
    });
});
于 2012-06-04T11:25:25.040 回答
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>
于 2012-06-04T11:27:13.473 回答
0

您的

var timerID;

变量被定义为处理程序内部的局部变量onmouseover，因此onmouseout处理程序不知道它。

将其声明为全局变量，或者更好地 - 将其封装到一个对象中，该对象将包含timerID作为字段mouseover和mouseout处理程序作为方法。

于 2012-06-04T11:24:05.127 回答