jQuery определяет, сколько секунд мышь остается над элементом

Есть ли способ определить, сколько секунд указатель мыши остается на элементе html?

Я хотел бы получить, сколько секунд мышь остается над элементом, чтобы немного задержать событие обратного вызова... если это возможно :)

я пытаюсь использовать простой цикл for(), определяющий счетчик:

var time_over ; 
$('.bean-active').live('mouseover',function(){  
  id_tag = $(this).attr("id");   
  for(time_over = 1;time_over <= 3000;time_over ++){
      if(time_over == 3000){
         $('.bean-bubble,.bean-bubble img').hide();   
         $('#bean-bubble-'+id_tag+',#bean-bubble-'+id_tag+' img').show();
      }  
  }   
});

проблема в том, что он не работает :(

также я хотел бы связать событие mouseleave, логика скрипта должна быть:

while ( mouseover element count how many time it stays over) 
  if (time == n)
  { do somenthing } 
if (mouseleave from element earlier then time)
{ do somenthing different }

javascript jquery mouseover mouseevent jquery-plugins
person itsme    schedule 22.08.2011    source источник
comment
использую это сейчас :), но, похоже, тайм-аут у меня не работает: P   -  person itsme    schedule 22.08.2011
comment
$('.bean-active').live('mouseover',function(){ $(this).hoverIntent({ over: function(){ id_tag ​​= $(this).attr(id); $(this) .fadeTo(100,0.5).fadeTo(200,1);$('.bean-bubble,.bean-bubble img').hide(); $('#bean-bubble-'+id_tag+',#bean -bubble-'+id_tag+' img').show(); }, timeout:900, out: function(){ return false; } }); $(this).trigger('mouseover'); });   -  person itsme    schedule 22.08.2011
comment
Можно ли считать секунды, не отпуская мышь? потому что мне нужно загрузить данные через три секунды без предварительной загрузки данных.   -  person jsjq-finder    schedule 21.11.2019

Ответы (4)


arrow_upward
2
arrow_downward

Вы должны иметь возможность использовать функцию hover() для захвата, когда мышь проходит по определенному элементу, а затем реагировать по желанию, когда мышь удаляется от этого объекта.

$("#someDiv").hover(function(){ 
    //start counter
}, function(){
    //stop counter
});
person RobB    schedule 22.08.2011

arrow_upward
7
arrow_downward

Учитывая эту разметку:

<div id="hoverOverMe">Hover over me</div>
<div id="output"></div>

Что-то вроде этого плагина должно помочь:

(function($) {
    $.fn.delayedAction = function(options)
    {
        var settings = $.extend(
            {},
            {
                delayedAction : function(){},
                cancelledAction: function(){},
                hoverTime: 1000               
            },
            options);

        return this.each(function(){
           var $this = $(this);
            $this.hover(function(){  
               $this.data('timerId',
                          setTimeout(function(){
                                      $this.data('hover',false);
                                      settings.delayedAction($this);
                                      },settings.hoverTime));
                $this.data('hover',true);
            },
            function(){        
                if($this.data('hover')){       
                    clearTimeout($this.data('timerId'));
                    settings.cancelledAction($this);
                }
                $this.data('hover',false);
            } );
        });
    }
})(jQuery);

и код вызова:

$('#hoverOverMe').delayedAction (
    {
        delayedAction: function($element){
            $('#output').html($element.attr('id') + ' was hovered for 3 seconds');
        },
        cancelledAction: function($element){
            $('#output').html($element.attr('id') + ' was hovered for less than 3 seconds');
        },
        hoverTime: 3000 // 3 seconds
    }
);

Живой пример: http://jsfiddle.net/nrUqS/

Для вашего требования должно быть достаточно чего-то вроде этого:

$('.bean-active').delayedAction(
{ 
   delayedAction: function($element){  
       id_tag = $element.attr("id");   
       $('.bean-bubble,.bean-bubble img').hide();   
       $('#bean-bubble-'+id_tag+',#bean-bubble-'+id_tag+' img').show();
    },
    hoverTime: 3000
});
person Jamiec    schedule 22.08.2011

arrow_upward
3
arrow_downward

Этот код рассчитает время в миллисекундах, в течение которого вы наводите указатель мыши на элемент:

$(document).ready(function() {
$('#element').bind('mouseenter mouseleave', function(evt) {
    var currentTime == new Date();
    if (evt.type === 'mouseenter') {
        $(this).data('mouseenterTime') == currentTime.getTime();
    } else if (evt.type === 'mouseleave') {
        var mouseoverTime = currentTime.getTime() - $(this).data('mouseenterTime');
        alert('mouseover time was: ' + mouseoverTime);
    }
})
});
person C. Spencer Beggs    schedule 22.08.2011
comment
Мне нравится, как вы настроили bind. Это упрощает организацию и повторное использование логики, но со временем я получаю NAN для мыши, когда запускаю эту функцию. Вы заставили это работать? - person Winnemucca; 19.09.2015
comment
Можно ли считать секунды, не отпуская мышь? потому что мне нужно загрузить данные через три секунды без предварительной загрузки данных. - person jsjq-finder; 21.11.2019

arrow_upward
0
arrow_downward

Я использовал ответ К. Спенсера Беггса в качестве шаблона, потому что его ответ мне не подошел. Я использовал простые переменные, включил множество сообщений console.log и исправил код '==' на '='. Этот пример будет ожидать 3 секунды действия «наведения курсора на ссылку», прежде чем действовать. ХТХ кто-то.

var mouseenterTime = 0;

$(document).on('mouseenter mouseleave', '#element', function (evt)
{
    var currentTime = new Date();
    if (evt.type === 'mouseenter') 
    {
        mouseenterTime = currentTime.getTime();
        console.log('mouseenterTime (#1): ' + mouseenterTime);
    } else if (evt.type === 'mouseleave') {
        console.log('mouseenterTime (#2): ' + mouseenterTime);
        var mouseoverTime = currentTime.getTime() - mouseenterTime;
        console.log('mouseover time was: ' + mouseoverTime);

        // Checking if the Hover action has latest for longer than 3 seconds. 
        if(mouseoverTime > 3000) {console.log("Three seconds have elapsed")}
    }
})
person Alan N    schedule 23.10.2014
comment
Превосходно. mouseenterTime должен быть вне функции. - person Winnemucca; 21.09.2015
comment
Можно ли считать секунды, не отпуская мышь? потому что мне нужно загрузить данные через три секунды без предварительной загрузки данных. - person jsjq-finder; 21.11.2019