How to check that the mouse holds a few seconds on an element

Question

How can we check the mouse for a few seconds on an element. Means that a function or event is executed only if the user holds the mouse button for several seconds (3 seconds) on the element.

Many answers found on the stack, but these solutions delay execution, but I want to check that the mouse is locked or not. If yes, execute the else function, do not do anything.

The same question has already been asked , but has not yet received an answer exactly what I'm looking at.

Is it possible?

Answer 1

, , , div 3 , ,

var myTimeout;

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

Answer 2

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 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 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

Checkout

• 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 .

If you listen more than this, this is not possible, since you should have reset, and then reset. Otherwise, you do your job.

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

This is the base code, I think you can improve and customize according to your requirements.

Answer 6

Here is some code (with fiddle ) that does what you want ...

(he also shows how bored I am today)

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