如何检查鼠标在元素上的某些时间

Question

我们如何检查鼠标在一个元素上钻了几秒钟。

意味着只有当用户将鼠标按住元素上的最小秒数（例如：3秒）时才应执行该功能。

堆栈中发现了很多答案，但解决方案是延迟执行，但是我想检查鼠标是否有孔，如果是，执行其他功能则不做任何操作。

之前已经问过同样的问题 ，但还没有得到我正在寻找的答案

可能吗？

Answer 1

这是一个自定义的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/

Answer 2

我认为你正在寻找这个，这里如果一个div悬停并按住鼠标至少3秒然后做你喜欢的东西

var myTimeout;

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

Answer 3

应该很容易：

$('.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
}

Answer 4

查看

逻辑

• mousedown处理程序记录单击开始时间
• mouseup处理程序记录鼠标启动时间并计算时间差（如果超过3秒），然后警告其他时间警报少于3秒

HTML

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

jQuery的

 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();

      });

Answer 5

这都是关于逻辑的。

你只需要一个变量来告诉你你是否已经听了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.
});

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

Answer 6

这里有一些代码（带小提琴 ）可以做你想要的......

（ 它也表明我今晚有多无聊 ）

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);
}