This article illustrates the mouse pointer stop motion trigger event instance code, sharing for everyone to reference, the specific content as follows
in JS has built-in mouse various events, such as click Events, MouseMove events and so on, but there is no mouse pointer to stop the movement of this event, The following is the use of jquery simulation to achieve this effect, I hope to be able to bring some help to friends in need. The
code is as follows:
The above code to achieve our requirements, when the mouse pointer in the DIV stopped moving, it will pop up the corresponding div id attribute value, the following describes 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{}) to add a function for the jquery instance object.
The 3.return This.each (function () {}) iterates through each DOM element object in the collection of jquery objects and uses this object as the context to execute the function, meaning that this in the function points to each DOM object.
4.var x=0,y=0, declaring variables x and y and assigning an initial value of 0 to store the previous coordinate of the mouse pointer.
5.var x1=0,y1=0, declare variable x1 and y1 and assign an initial value of 0 to store the current coordinates of the mouse pointer.
6.var Isrun = False to declare a token indicating whether the mouse pointer is moving.
7.var Timer=null, declares a token as the return value of the timer function.
8.var Self=this, assigns a reference to the current DOM object to the self variable.
9.var sif=function () {}, declaring a function to determine whether the mouse pointer stops moving.
10.timer=setinterval (function () {},500) performs a function every 500 milliseconds, and if the mouse pointer does not change position within 500 milliseconds, it is assumed to have stopped moving.
11.x = X1,y = y1, the current coordinates of the mouse pointer are stored in x and Y.
12.$ (This). MouseMove (function (e) {}) registers the MouseMove event handler function for the current object.
13.x1 = E.pagex, the current mouse pointer is deposited in X1.
14.y1 = E.pagey, deposit the current mouse ordinate into y1.
15.!isrun && Sif (), Isrun = True, performs the SIF () function and sets the Isrun to true if the current mouse is out of movement. That is, the SIF () function is guaranteed to execute only once while the mouse pointer is moving, otherwise many of this function may be executed.
16.mouseout (function () {}) registers the Mouseout event handler function, which is, of course, a chained call used.
17.clearInterval (timer), stop the operation of the timer function.
18.isRun = False to 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 to learn about mouse events help.