0

別の DOM 要素にカーソルを合わせたときに div を表示したいのですが、div が表示される前にマウスを移動すると、このアクションをキャンセルしたいと考えています。これまでのところ、これは私が持っているものです

HTML

<div id="msg">
    <a href="#" id="33"> HERE </a>
</div>

JS

var timer;
$("body").on('mouseenter', '#msg a',function(){
    var userHover = $(this).attr("id");
    timer = setTimeout(function () {
        alert(userHover);   
    }, 1000);
}).on('mouseleave', '#msg a', function(){

});

http://jsfiddle.net/Nyrdz/

どんな助けでも大歓迎です。

4

1 に答える 1

3

あなたが探しているclearTimeout()：

var timer;
$("body").on('mouseenter', '#msg a', function(){
    var userHover = $(this).attr("id");
    timer = setTimeout(function () {
        alert(userHover);   
    }, 1000);
}).on('mouseleave', '#msg a', function(){
    clearTimeout(timer);
});

ただし、一致する要素が複数ある場合は、値を要素固有のデータ#msg aに保存することを強くお勧めします。timer

$("body").on('mouseenter', '#msg a', function(){
    var userHover = $(this).attr("id");
    $(this).data('timer', setTimeout(function () {
        alert(userHover);   
    }, 1000));
}).on('mouseleave', '#msg a', function(){
    clearTimeout($(this).data('timer'));
});
于 2013-02-02T12:36:29.243 に答える