1

入れ子関数と関係があると思いますが、このようにする必要があります。なぜ機能しないのですか？私は愚かなことをしていますか？これは孤立した例であり、使用している必要がある$(this)ので、関数をネストする必要があるようです。

HTML：

<div class="box"></div>
<ul>
<li>Hover box, it turns blue. Leave box, it turns red after 2 secs.</li>
    <li>If you hover back onto box before 2 secs is up, it's supposed to clear timer and keep box blue.</li>
    <li>It doesn't clear timer and after 2 secs the box still turns red. Why?</li>
</ul>

JavaScript：

var t;

$('.box').on('mouseenter', function() {

    $thisBox = $(this);

    clearTimeout(t);

    $thisBox.addClass('blue');

    $thisBox.on('mouseleave', function() {

        t = setTimeout(function() { $thisBox.removeClass('blue'); }, 2000);

     })

});

JSFiddle： http: //jsfiddle.net/ddbtZ/7/

見てくれてありがとう:)

4

2 に答える 2

4

http://jsfiddle.net/ddbtZ/3/

.on()ネストしないでください。事実上、要素にカーソルを合わせるたびに新しいハンドラーがアタッチされます。

編集：質問の説明に従って。

.one()の代わりに使用.on()

http://jsfiddle.net/ddbtZ/8/

于 2012-06-04T23:36:33.527 に答える
2

イベントmouseleaveから移動すると、機能します。mouseenter

var t;

$('.box').on('mouseenter', function() {
    clearTimeout(t);
    $('.box').addClass('blue');
});

$('.box').on('mouseleave', function() {
    t = setTimeout(function() {
        $('.box').removeClass('blue');
    }, 2000);
})​;

デモ：http： //jsfiddle.net/ddbtZ/4/

于 2012-06-04T23:37:37.927 に答える