如何检查鼠标在一个元素上停留了几秒钟

我想你正在寻找这个，如果一个div得到悬停并按住鼠标至少3秒然后做你的东西像下面

var myTimeout;
$('div').mouseenter(function() {
    myTimeout = setTimeout(function() {
        alert("do your stuff now");
    }, 3000);
}).mouseleave(function() {
    clearTimeout(myTimeout);
});

这是一个自定义的jquery函数

$.fn.mouseHover = function(time, callback){
  var timer;
  $(this).on("mouseover", function(e){
      timer = setTimeout(callback.bind(this, e), time);
  }.bind(this)).on("mouseout", function(e){
      clearTimeout(timer);
  })
};
$('#my-element').mouseHover(3000, function(){ alert("WHOOPWhOOP");});

以防OP意味着点击并按住

$.fn.mouseHold = function(time, callback) {
    var timer;
    $(this).on("mousedown", function(e){
        e.preventDefault();
        timer = setTimeout(callback.bind(this, e), time);
    }.bind(this)).on("mouseup", function(e){
        clearTimeout(timer);
    })
}

jsfiddle: http://jsbin.com/huhagiju/1/

应该足够简单:

$('.your-element').on('mousedown', function(event) {
    var $that = $(this);
    // This timeout will run after 3 seconds.
    var t = setTimeout(function() {
        if ($that.data('mouse_down_start') != null) {
            // If it's not null, it means that the user hasn't released the click yet
            // so proceed with the execution.
            runMouseDown(event, $that);
            // And remove the data.
            $(that).removeData('mouse_down_start');
        }
    }, 3000);
    // Add the data and the mouseup function to clear the data and timeout
    $(this)
        .data('mouse_down_start', true)
        .one('mouseup', function(event) {
            // Use .one() here because this should only fire once.
            $(this).removeData('mouse_down_start');
            clearTimeout(t);
        });
});
function runMouseDown(event, $that) {
    // do whatever you need done
}

结帐

• 鼠标下移处理程序记录点击开始时间
• 鼠标启动处理程序记录鼠标启动时间并计算时差，如果超过3秒则报警时间，否则报警时间小于3秒

HTML

<p>Press mouse and release here.</p>

 var flag, flag2;

    $( "p" )
      .mouseup(function() {
        $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
            flag2 = new Date().getTime();
       var passed = flag2 - flag;
          if(passed>='3000')
              alert(passed);
          else
               alert("left before");
           console.log(passed); //time passed in milliseconds     
      })
      .mousedown(function() {
        $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
          flag = new Date().getTime();
      });

这都是逻辑问题。

你只是有一个变量告诉你是否已经听了一段时间，比如3秒。

如果你正在监听超过这个值，这是不可能的，因为你应该重置它，所以重置它。否则你做你的工作。

var mySpecialFunc = function() { alert("go go go..."); };
var lastTime = 0;
var main_id = "some_id" ;// supply the id of  a div over which to check mouseover
document.getElementById(main_id).addEventListener("mouseover",function(e) {
    var currTime = new Date().getTime();
    var diffTime = currTime - lastTime;
    if(diffTime > 4000) {
        // more than 4 seconds reset the lastTime
        lastTime = currTime;
        alert("diffTime " + diffTime);
         return ;   
    }
    if(diffTime > 3000) {
       // user had mouseover for too long
       lastTime = 0; 
       mySpecialFunc("info");
    } 
    // else do nothing.
});

这是一个基本的代码，我认为你可以根据你的要求改进和调整

这里有一些代码(带有一个fiddle)，可以做你想做的事情…

(这也表明我今晚有多无聊)

var props = {
    1000: { color: 'red',    msg: 'Ready' },
    2000: { color: 'yellow', msg: 'Set' },
    3000: { color: 'green' , msg: 'Go!' }
};
var handles = [];
var $d = $('#theDiv');
$d.mouseenter(function () {
    $.each(props, function (k, obj) {
        handles[k] = setTimeout(function () {
            changeStuff($d, obj);    
        }, k);
    });    
}).mouseleave(function () {
    $.each(handles, function (i, h) {
        clearTimeout(h);
    });
    reset($d);
});
function reset($d) {
    $d.css('backgroundColor', 'orange');
    $d.text('Hover here...');
}
function changeStuff($node, o) {
    $node.css('backgroundColor', o.color);
    $node.text(o.msg);
}