4

これがインラインであるはずがないことは知っていますが、YUIライブラリのダイアログで強制されます。私の問題は、このdivにカーソルを合わせると、左マージンのスクロールがアクティブになりますが、マウスをdivの外に移動しても停止しないことです。JSコンソールは次のように報告します。

Uncaught 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 には表示されません。

一般に、すべてを属性に上書きするのではなく、関数に入れることをお勧めします。これにより、これらすべてのスコープの問題が回避されます。また、属性の代わりにハンドラーを使用することをお勧めします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;

variable はonmouseoverハンドラー内でローカル変数として定義されているため、onmouseoutハンドラーはそれを認識していません。

それをグローバル変数として宣言するか、より良い方法で宣言します-オブジェクトにカプセル化します。これにはtimerID、フィールドとして含まれ、mouseoverハンドラーmouseoutがメソッドとして含まれます。

于 2012-06-04T11:24:05.127 に答える