Jquery simulates the implementation of the mouse pointer Stop Motion event, jquery mouse pointer

Source: Internet
Author: User

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:
  • Jquery event mechanism extension jquery right-click event
  • Jquery mouse stop move event
  • Use JS or jQuery to simulate Mouse clicking a tag Event code
  • Example of how jQuery mouse goes through (hover) event delay processing
  • JQuery implements click and mouse event sensing
  • JavaScript and JQuery code sharing for getting the coordinates of the mouse pointer

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.