Of Stack

jquery simulates mouse pointer stop motion events

  • 2020-11-30 08:10:37
  • OfStack

This article explained the mouse pointer stop motion trigger event instance code, share for your reference, the specific content is as follows
There are various built-in mouse events in js, such as click event, mousemove event, etc., but the mouse pointer does not stop moving this event, the following jquery simulation is used to achieve this effect, hoping to bring a certain help to the friends in need.
The code is as follows: 


<html>
<head>
<meta charset="gb2312">
<title> The mouse pointer stops moving </title>
<style type="text/css">
#top
{
 width:200px;
 height:100px;
 background-color:#ccc;
}
#bottom
{
 width:200px;
 height:100px;
 background-color:#ccc;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
(function($){
 $.fn.moveStopEvent = function(callback){
  return this.each(function(){
   var x = 0,
   y = 0,
   x1 = 0,
   y1 = 0,
   isRun = false,
   si,
   self = this;
 
   var sif = function(){
    si = setInterval(function(){
     if(x == x1 && y ==y1)
         {
      clearInterval(si);
      isRun = false;
      callback && callback.call(self);
     }
     x = x1;
     y = y1;
    }, 500);
   }
 
   $(this).mousemove(function(e){
    x1 = e.pageX;
    y1 = e.pageY;
    !isRun && sif(), isRun = true;
   }).mouseout(function(){
    clearInterval(si);
    isRun = false;
   });
  });
 }
})(jQuery);
 
$(function(){
 $("#top,#bottom").moveStopEvent(function(){
  alert($(this).attr("id"));
 })
})
</script>
 
</head>
<body>
<div id="top"> The home of the script 1</div>
<br/>
<div id="bottom"> The home of the script 2</div>
</body>
</html>

The above code realizes our requirements. When the mouse pointer stops moving in div, the corresponding id attribute value of div will pop up. The following is the implementation process of div.
Code comments:
1.(function($){}(jQuery), declare an anonymous function and execute it with the parameter of jQuery object.
2.$.fn. moveStopEvent=function(callback{}), add function to jQuery instance object.
3.return ES27en. each(function(){}), traverses every 1 DOM element object in the jQuery object set, and USES this object as the context to execute the function, that is, this in function points to every 1 DOM object.
4.var x=0,y=0, declare variables x and y and assign an initial value of 0 to store the last coordinate of the mouse pointer.
5.var x1=0,y1=0, declare variables x1 and y1 and assign an initial value of 0 to save the current coordinates of the mouse pointer.
6.var isRun = false, declare 1 tag to indicate whether the mouse pointer is moving.
7.var timer=null, declare 1 tag as the return value of timer function.
8.var self=this, assigns a reference to the current DOM object to the self variable.
9.var sif=function(){}, declare 1 function to determine whether the mouse pointer stops moving.
10.timer=setInterval(function(){},500), execute the function once every 500 milliseconds, if the mouse pointer does not change position within 500 milliseconds, it is considered to have stopped moving.
11.x = x1, y = y1, save the current coordinates of the mouse pointer into x and y.
12.$(this).mousemove(function(e){}), registers the mousemove event handler for the current object.
13.x1 = ES84en. pageX, save the current horizontal coordinate of the mouse pointer into x1.
14.y1 = ES89en. pageY, save the current mouse ordinate to y1.
15.!isRun & & sif(),isRun = true, if the mouse is not currently moving, then execute the sif() function and set isRun to true. This means that the sif() function is guaranteed to be executed only once when the mouse pointer 1 is moving straight, otherwise it may be executed many times.
16.mouseout(function(){}) registers the mouseout event handler, of course, using the chain call.
17.clearInterval(timer), stop the timer function.
18.isRun = false, set the value of the variable to false, indicating that the mouse has stopped moving.

Above is the entire content of this article, with detailed code comments, I hope to help you learn mouse events.

Related articles: