Home >Web Front-end >JS Tutorial >jquery simulates the mouse pointer stop motion event_jquery

jquery simulates the mouse pointer stop motion event_jquery

WBOYOriginal: 2016-05-16 15:20:281327browse

The example in this article explains the example code of the event triggered by the mouse pointer stopping movement. It is shared with everyone for your reference. The specific content is as follows
There are various built-in mouse events in js, such as click events, mousemove events, etc., but there is no event that the mouse pointer stops moving. Let's use jquery to simulate this effect. I hope it can bring some benefits to friends who need it. help.
The code is as follows:

<html>
<head>
<meta charset="gb2312">
<title>鼠标指针停止运动</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">脚本之家一</div>
<br/>
<div id="bottom">脚本之家二</div>
</body>
</html>

The above code realizes our requirements. When the mouse pointer stops moving in the div, the id attribute value of the corresponding div will pop up. Here is an introduction to its implementation process.
Code comments:
1.(function($){}(jQuery), declare an anonymous function and execute this function. The parameter is a jQuery object.
2.$.fn.moveStopEvent=function(callback{}), add a function to the jQuery instance object.
3.return this.each(function(){}), traverse each DOM element object in the jQuery object collection, and use this object as the context to execute the function, which means that this in the function points to each DOM object. .
4.var x=0,y=0, declare variables x and y and assign the initial value to 0, which are used to store the previous coordinate of the mouse pointer.
5.var x1=0, y1=0, declare variables x1 and y1 and assign the initial value to 0, which are used to store the current coordinates of the mouse pointer.
6.var isRun = false, declares a mark indicating whether the mouse pointer is moving.
7.var timer=null, declare a mark as the return value of the timer function.
8.var self=this, assign the reference of the current DOM object to the self variable.
9.var sif=function(){}, declares a function to determine whether the mouse pointer stops moving.
10.timer=setInterval(function(){},500), execute the function every 500 milliseconds. If the mouse pointer does not change its position within 500 milliseconds, it is considered to have stopped moving.
11.x = x1, y = y1, store the current coordinates of the mouse pointer into x and y.
12.$(this).mousemove(function(e){}), register the mousemove event processing function for the current object.
13.x1 = e.pageX, store the current abscissa of the mouse pointer into x1.
14.y1 = e.pageY, store the current mouse ordinate into y1.
15.!isRun && sif(), isRun = true, if the current mouse is not moving, then execute the sif() function and set isRun to true. That is to say, when the mouse pointer keeps moving, it is guaranteed that the sif() function will only be executed once, otherwise many of these functions may be executed.
16.mouseout(function(){}) registers the mouseout event processing function. Of course, this is a chain call used.
17.clearInterval(timer), stops the running of the timer function.
18.isRun = false, set the value of the variable to false, indicating that the mouse has stopped moving.

The above is the entire content of this article, with detailed code comments. I hope it will be helpful for everyone to learn mouse events.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analyzing the order of loading and code execution of JavaScript scripts executed by the browser_javascript skillsNext article：Analyzing the order of loading and code execution of JavaScript scripts executed by the browser_javascript skills

See more

jquery simulates the mouse pointer stop motion event_jquery

Related articles