Home > Developer > JavaScript
Jquery simulates the implementation of the mouse pointer Stop Motion event, jquery mouse pointer
The example code of the mouse pointer Stop Motion trigger event is described in this article for your reference. The details are as follows:
In js, there are various built-in mouse events, such as click events and mousemove events, but there is no mouse pointer to stop the motion event. The following uses jquery to simulate this effect, we hope to help our friends in need.
The Code is as follows:
<Html>The above Code meets our requirements. When the mouse pointer stops moving in the div, the id attribute value of the corresponding div will pop up. The following describes how to implement it.
Code comment:
1. (function ($) {} (jQuery) declares an anonymous function and executes this function. The parameter is a jQuery object.
2. $. fn. moveStopEvent = function (callback {}) to add a function for the jQuery instance object.
3. return this. each (function () {}) traverses every DOM element object in the jQuery object set and uses this object as the context to execute the function. That is to say, this in the function points to every DOM object.
4. var x = 0, y = 0, declare the variables x and y, and assign the initial values to 0 to store the previous coordinates of the mouse pointer.
5. var x1 = 0, y1 = 0, declare the variables x1 and y1, and assign the initial values to 0 to store the current coordinates of the mouse pointer.
6. var isRun = false: declare a flag to show whether the mouse pointer is moving.
7. var timer = null. Declare a flag 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 motion.
10. timer = setInterval (function () {}, 500). The timer function is executed every 500 milliseconds. If the cursor position does not change within 500 milliseconds, it is determined that the movement has stopped.
11. x = x1, y = y1: Save the current coordinates of the mouse pointer to x and y.
12. $ (this). mousemove (function (e) {}), register the mousemove event handler function for the current object.
13. x1 = e. pageX, which saves the abscissa of the current mouse pointer to x1.
14. y1 = e. pageY, which saves the vertical coordinates of the current mouse to y1.
15 .! IsRun & sif (), isRun = true. If the current mouse is not moved, execute the sif () function and set isRun to true. That is to say, when the mouse pointer is always moving, the sif () function will be executed only once. Otherwise, many of the functions may be executed.
16. mouseout (function () {}) registers the mouseout event processing function. Of course, this is a chained call.
17. clearInterval (timer) to stop the timer function.
18. isRun = false. Setting the variable value to false indicates that the mouse has stopped motion.The above is all the content of this article, with detailed code comments, hope to help you learn about mouse events.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
