Method, system and equipment for judging whether mouse enters four directions of DIV

Abstract

The invention discloses a method, a system and equipment for judging whether a mouse enters four directions of a DIV. The invention discloses a method for judging whether a mouse enters four directions of a DIV. The method comprises the following steps: creating an HTML file; an element to be moved in is divided into four blocks, and a mousemove event is triggered to obtain an area where a mouse falls in for the first time; a Math.atan2 function is called, angle calculation is executed, the formula is angle = Math.atan2 (h, w), w represents that offsetX subtracts half of the width of a Div box, h represents that half of the height of a DIV box subtracts offsetY, offsetX represents the horizontal offset of a mouse event or a trigger event relative to the left edge of an element of the event, and offsetY represents the vertical offset of the mouse event or the trigger event relative to the upper edge of the element of the event; and monitoring a moving-in event of the mouse, and judging the moving-in direction of the mouse.

Description

Technical Field

[0001] The present invention relates to the field of computers, and in particular to a method, system and device for judging four directions in which a mouse enters a DIV. Background Art

[0002] In the traditional solution, to determine the direction of the mouse entering the DIV, DIVs are attached to the four edges of the element, and the mouse entry events of these divs are monitored to determine the direction of the mouse entering. This design has many shortcomings. First, the width and height of these divs need to be considered. If the divs are too wide, the direction of entry will be abnormal. If the divs are too thin, the abnormality of the entry direction can be reduced, but a new problem will arise, which may cause the mouse events of these divs not to be triggered. This is because the browser monitors mouse-related events not continuously, but in a hashed manner. That is, it monitors several times in a short period of time. If the mouse moves slowly, the monitoring points are dense and can cover the div area. If the mouse moves quickly, the monitoring points are sparse, and it may cross the div area, resulting in failure to monitor and determine the direction of the mouse entering.

[0003] In addition, the above conventional method of judging the direction of mouse entry has problems such as large amount of code, complex judgment logic, low practicality, and low usability, which increases the development time of developers and reduces efficiency. Summary of the invention

[0004] One of the purposes of the present invention is to provide a method, system and device for judging the four directions of mouse entering DIV. The direction of mouse entry is judged by the slope of the mouse entering DIV, which can solve the problems of high judgment error, high code volume, complex logic and the like existing in traditional methods, improve the development efficiency of developers and save time.

[0005] One of the purposes of the present invention is to provide a method, system and device for judging the four directions of the mouse entering the DIV, by using the slope of JS to judge the four directions of the mouse entering the DIV, thereby reducing the complexity of the judgment logic and improving the efficiency of developers.

[0006] In order to achieve at least one of the inventive purposes of the present invention, the present invention provides a method for determining the four directions in which a mouse enters a DIV, comprising the following steps:

[0007] Create HTML files;

[0008] Divide the element to be moved into four parts, trigger the mousemove event to obtain the area where the mouse first lands;

[0009] Call the Math.atan2 function to perform angle calculations. The formula is:

[0010] angle = Math.atan2(h,w), where w represents offsetX minus half of the width of the Div box, and h represents half of the height of the DIV box minus offsetY, where offsetX represents the horizontal offset of the mouse event or the triggering event relative to the left edge of the element of the event, and offsetY represents the vertical offset of the mouse event or the triggering event relative to the top edge of the element of the event; and

[0011] Monitor the mouse move event and determine the mouse move direction.

[0012] In some embodiments, the method for determining whether the mouse enters four directions of a DIV includes the steps of: creating an HTML file, calling a "!DOCTYPE html" statement to define the document type as HTML5.

[0013] In some embodiments, the method for determining the four directions of the mouse entering the DIV includes the steps of: calling the "head" statement to define the page header, and calling the "body" statement to define the page body.

[0014] In some embodiments, the method for determining the four directions in which the mouse enters the DIV includes the steps of: calling the "script" " / script" statement as a tag, and writing a function for determining the direction in which the mouse enters the tag.

[0015] In some embodiments, the method for determining whether the mouse enters four directions of a DIV includes the steps of: calling a "document.querySelector" statement to obtain a container for the entire area.

[0016] In some embodiments, the method for determining the four directions in which the mouse enters the DIV includes the steps of: obtaining the position of the rectangular area event displayed in the current area in the browser visible window.

[0017] According to another aspect of the present invention, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the method for determining the four directions of the mouse entering the DIV are performed.

[0018] According to another aspect of the present invention, a device for determining whether a mouse enters four directions of a DIV is provided, comprising:

[0019] Memory, for storing software applications,

[0020] The processor is used to execute the software application program, and each program of the software application program correspondingly executes each step of the method for determining the four directions in which the mouse enters the DIV.

[0021] According to another aspect of the present invention, a system for determining the four directions of a mouse entering a DIV is provided, which applies the method for determining the four directions of a mouse entering a DIV. The system for determining the four directions of a mouse entering a DIV includes an HTML file processing module and a mouse direction determination module. The HTML file processing module creates an HTML file and calls a tag code in the HTML file to write a function for determining the direction in which the mouse enters. The mouse direction determination module calls the function for determining the direction in which the mouse enters, performs calculations, and determines the direction in which the mouse moves.

[0022] In some embodiments, the HTML file processing module includes a document type module, a page module and a tag module. The document type module calls the "!DOCTYPE html" statement to define the document type as HTML5, the page module calls the "head" statement to define the page header, and calls the "body" statement to define the page body; the tag module calls the "script" " / script" statement as a tag, and writes a function to determine the direction of mouse entry in the tag. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 The figure is an example of the steps of a method for determining the four directions in which a mouse enters a DIV according to an embodiment of the present invention.

[0024] Figure 2 It is a schematic diagram of the method for judging the four directions of the mouse entering the DIV according to the above embodiment of the present invention, and explains the division of the element to be moved in.

[0025] Figure 3 3 is a schematic diagram of the method for determining the four directions of the mouse entering the DIV according to the above embodiment of the present invention, illustrating the offset in each direction.

[0026] Figure 4 3 is a schematic diagram of the method for determining the four directions of the mouse entering the DIV according to the above embodiment of the present invention, illustrating the offset in each direction. DETAILED DESCRIPTION

[0027] The following description is used to disclose the present invention so that those skilled in the art can implement the present invention. The preferred embodiments described below are only examples, and those skilled in the art can think of other obvious variations. The basic principles of the present invention defined in the following description can be applied to other embodiments, variations, improvements, equivalents, and other technical solutions that do not deviate from the spirit and scope of the present invention.

[0028] It is to be understood that the term "one" should be understood as "at least one" or "one or more", that is, in one embodiment, the number of an element may be one, while in another embodiment, the number of the element may be multiple, and the term "one" should not be understood as a limitation on the quantity.

[0029] The present invention is an invention related to a computer program. Figure 1 The flowchart of a method for judging the four directions of the mouse entering the DIV based on the present invention is shown, which explains the solution for solving the problem proposed by the present invention, based on the computer program processing flow, by executing the computer program compiled according to the above flow to control or process the external object or internal object of the computer. Through the method of judging the four directions of the mouse entering the DIV of the present invention, judging the direction of the mouse entering the DIV by the slope of the mouse entering the DIV can utilize the computer system to solve the problems of high judgment error, high code volume, complex logic, etc. in the traditional method, improve the development efficiency of developers, and save time. It can be understood that the "computer" referred to in the present invention not only refers to desktop computers, laptops, tablets and other devices, but also includes other intelligent electronic devices that can run according to the program and process data.

[0030] like Figure 1 As shown, the method for determining the four directions in which the mouse enters the DIV includes the following steps:

[0031] S100: Create an HTML file; and

[0032] S200: Write a function for determining the direction in which the mouse enters.

[0033] More specifically, step S100 includes the following steps:

[0034] S110: Create an HTML file and call the "!DOCTYPE html" statement to define the document type as HTML5;

[0035] S120: calling the "head" statement to define the page header, and calling the "body" statement to define the page body;

[0036] S130: Call the "script" " / script" statement as a label, and write a function for determining the direction in which the mouse enters into the label.

[0037] Furthermore, the step S200 further includes the following steps:

[0038] S210: calling the "document.querySelector" statement to obtain the container of the entire area;

[0039] S220: calling the "container.getBoundingClientRect()" statement to obtain the position of the rectangular area displayed in the current area in the browser visible window;

[0040] S230: Execute angle calculation;

[0041] S240: Call the "container.onmouseenter" statement to monitor the mouse entry event and determine the mouse entry direction.

[0042] Furthermore, the method for determining the four directions of the mouse entering the DIV also includes the following steps:

[0043] Divide the element to be moved into four parts, trigger the mousemove event to obtain the area where the mouse first falls, and then determine the direction of the mouse;

[0044] Call the Math.atan2(y,x) function to calculate the angle of the line from the origin (0,0) to the return point (x,y). The calculation formula is Theta = Math.atan2(rect.height / 2,rect.width / 2).

[0045] H means half of the height of the DIV box; W means half of the width of the DIV box;

[0046] The angle calculation formula of Theta is: Theta = Math.atan2(rect.height / 2,rect.width / 2); equivalent to Theta = Math.atan2(rect.height,rect.width).

[0047] Preferably, the angle of theta is calculated in JavaScript or other programming languages ​​that support the Math.atan2 function, where Math.atan2(y,x) is a function (in radians). This angle is measured relative to the positive x-axis (horizontally to the right) and ranges from -π to π (converted to degrees, the range is -180° to 180°).

[0048] Perform angle calculation, the calculation formula is: angle = Math.atan2(h,w); where w represents offsetX minus half of the width of the Div box. h represents half of the height of the DIV box minus offsetY. Where offsetX represents the horizontal offset of the mouse event or the triggering event relative to the left edge of the element of the event (with the current triggered element as the base, and the mouse at the location of the triggering element). offsetY represents the vertical offset of the mouse event or the triggering event relative to the top edge of the element of the event (with the current triggered element as the base, and the mouse at the location of the triggering element); and

[0049] By determining the range where the angel is located, determine the direction in which the mouse enters the DIV box.

[0050] Preferably, in a specific embodiment, the radian system is adopted, and Math.PI represents 180°.

[0051] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided in the form of methods, systems or computer program products. Therefore, the present invention may take the form of an all-hardware embodiment, an all-software embodiment, or an embodiment combining software and hardware.

[0052] The present invention can be embedded in a computer program product, which includes all the features that enable the method described herein to be implemented for determining the four directions of a mouse entering a DIV. The computer program product is contained in one or more computer-readable storage media, and the computer-readable storage medium has a computer-readable program code contained therein. According to another aspect of the present invention, a computer-readable storage medium is also provided, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the method for determining the four directions of a mouse entering a DIV of the present invention are executed. A computer storage medium is a medium in a computer memory for storing a certain discontinuous physical quantity. Computer storage media include, but are not limited to, semiconductors, disk storage, magnetic cores, magnetic drums, magnetic tapes, laser disks, etc. It can be understood by those skilled in the art that computer storage media are not limited to the aforementioned examples, and the aforementioned examples are merely examples and are not limited to the present invention.

[0053] According to another aspect of the present invention, a device is also provided, the device comprising: a software application, a memory for storing the software application, and a processor for executing the software application. Each program of the software application can correspondingly execute the steps of the method for determining the four directions of the mouse entering the DIV of the present invention.

[0054] A typical combination of hardware and software may be a general-purpose computer system with a computer program. When the program is loaded and executed, the computer system is controlled so that the method disclosed in the present invention for determining the four directions of the mouse entering the DIV can be executed.

[0055] It will be appreciated by those skilled in the art that the method for determining the four directions of a mouse entering a DIV of the present invention can be implemented by hardware, software, or a combination of software and hardware. The present invention can be implemented in a centralized manner in at least one computer system, or in a decentralized manner by different parts distributed in several interconnected computer systems. Any computer system or other device that can implement the method for determining the four directions of a mouse entering a DIV is applicable. The combination of common software and hardware can be a general-purpose computer system with a computer program installed, and the computer system is controlled by installing and executing the program to operate according to the method for determining the four directions of a mouse entering a DIV.

[0056] Corresponding to the embodiment of the method of the present invention, according to another aspect of the present invention, a system for judging whether a mouse enters four directions of a DIV is provided. The system for judging whether a mouse enters four directions of a DIV is an application of the method of the present invention for judging whether a mouse enters four directions of a DIV in improving a computer program.

[0057] Specifically, the system for judging the four directions of the mouse entering the DIV includes an HTML file processing module and a mouse direction judging module.

[0058] The HTML file processing module includes a document type module, a page module and a tag module. The document type module calls the "!DOCTYPE html" statement to define the document type as HTML5, the page module calls the "head" statement to define the page header, and calls the "body" statement to define the page body; the tag module calls the "script" " / script" statement as a tag, and writes a function for determining the mouse entry direction in the tag.

[0059] For example, in a specific preferred embodiment, the HTML file created by the HTML file processing module is:

[0060] <!DOCTYPE html>

[0061]

[0062]

[0063] <meta charset＝"UTF-8">

[0064] <meta name＝"viewport"content＝"width＝device-width,initial-scale＝1.0">

[0065] <title> Document< / title>

[0066] <style>

[0067] body{

[0068] display:flex；

[0069] justify-content:center；

[0070] margin:200px；

[0071] }

[0072] .container{

[0073] width:400px；

[0074] height:400px；

[0075] background-color:black；

[0076] }

[0077] < / style>

[0078]

[0079]

[0080] <div class＝"container">

[0081] <script>< / script>

[0082]

[0083]

[0084] Further, the mouse direction judgment module is configured to execute: write a function for judging the direction in which the mouse enters. Specifically, the mouse direction judgment module includes an area container module, a window position module, an angle calculation module and a monitoring judgment module. The area container module calls the "document.querySelector" statement to obtain the container of the entire area. The window position module calls the "container.getBoundingClientRect()" statement, and the current area displays the position of the rectangular area event in the browser visible window. The angle calculation module performs angle calculation. The monitoring judgment module calls the "container.onmouseenter" statement to monitor the mouse entry event and determine the mouse entry direction.

[0085] For example, in a specific preferred embodiment, the code after the mouse direction determination module is executed is as follows:

[0086] <div class＝"container">

[0087] <script>

[0088] const container＝document.querySelector(".container")；

[0089] const rect＝container.getBoundingclientRect()；

[0090] const theta＝Math.atan2(rect.height,rect.width)；

[0091] container.onmouseenter＝(e)＝>{

[0092] const w＝e.offsetx-rect.width / 2；

[0093] const h＝rect.height / 2e-offsetY；

[0094] const angle＝Math.atan2(h,w)；

[0095] if(angle<theta&&angle>＝-theta){

[0096] console.log("right")；

[0097] }else if(angle<-theta&&angle>＝-Math.PI+theta){

[0098] console.log("bottom")；

[0099] }else if(angle Math.PI-theta&&angle>＝theta){

[0100] console.log("top")；

[0101] }else{

[0102] console.log("left")；

[0103] }

[0104] }；

[0105] < / script>

[0106]

[0107] The system for judging the four directions of the mouse entering the DIV also includes an element segmentation module and a mousemove event module. The element segmentation module divides the element to be moved into four parts, and the mousemove event module triggers the mousemove event to obtain the area where the mouse falls for the first time, thereby judging the direction of the mouse entering.

[0108] More specifically, the angle calculation module further includes a theta angle calculation module and an angle angle calculation module. The theta angle calculation module is configured to execute:

[0109] Call the Math.atan2(y,x) function to calculate the angle of the line from the origin (0,0) to the return point (x,y). The calculation formula is Theta = Math.atan2(rect.height / 2,rect.width / 2).

[0110] H means half of the height of the DIV box; W means half of the width of the DIV box;

[0111] The angle calculation formula of Theta is: Theta = Math.atan2(rect.height / 2,rect.width / 2); equivalent to Theta = Math.atan2(rect.height,rect.width).

[0112] Preferably, the angle of theta is calculated in JavaScript or other programming languages ​​that support the Math.atan2 function, where Math.atan2(y,x) is a function (in radians). This angle is measured relative to the positive x-axis (horizontally to the right) and ranges from -π to π (converted to degrees, the range is -180° to 180°).

[0113] The angle calculation module is configured to perform:

[0114] Calculate the angle angle using the formula: angle = Math.atan2(h,w); where w represents offsetX minus half of the width of the Div box. h represents half of the height of the DIV box minus offsetY. Where offsetX represents the horizontal offset of the mouse event or the triggering event relative to the left edge of the element that caused the event (with the current triggering element as the base, and the mouse at the location of the triggering element). offsetY represents the vertical offset of the mouse event or the triggering event relative to the top edge of the element that caused the event (with the current triggering element as the base, and the mouse at the location of the triggering element).

[0115] The mouse direction determination module of the system for determining the four directions in which the mouse enters the DIV is further configured to execute: obtaining the range of angel in the angle calculation module, and determining the direction in which the mouse enters the DIV box.

[0116] For example, in a specific preferred embodiment, the code after the mouse direction determination module is executed is as follows: if (angle<theta&&angle> =-theta){

[0117] console.log("right");

[0118] }else if(angle<-theta&&angle>=-Math.PI+theta){

[0119] console.log("bottom");

[0120] }else if(angle<Math.PI-theta&&angle> =theta){

[0121] console.log("top");

[0122] }else{

[0123] console.log("left");

[0124] }

[0125] It will be appreciated by those skilled in the art that the present invention has been described with reference to the flowcharts and / or block diagrams of the methods, systems and computer program products according to the present invention. Each box in the flowchart and / or block diagram, and the combination of boxes in the flowchart and / or block diagram, can obviously be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor or other programmable data processing device to produce a machine, so that the instructions (the instructions are passed through the processor of the computer or other programmable data processing device) generate a device for implementing the functions specified in one or more boxes of the flowchart and / or block diagram.

[0126] It should be understood by those skilled in the art that the embodiments of the present invention described above and shown in the accompanying drawings are only examples and do not limit the present invention. The purpose of the present invention has been fully and effectively achieved. The functional and structural principles of the present invention have been demonstrated and explained in the embodiments, and the embodiments of the present invention may be deformed or modified in any way without departing from the principles.

Claims

1. A method for determining the four directions of a mouse entering a DIV, characterized in that: The method for determining the four directions in which the mouse enters the DIV comprises the following steps: Create HTML files; Divide the element to be moved into four parts, trigger the mousemove event to obtain the area where the mouse first lands; Call the Math.atan2 function to perform angle calculations. The formula is: angle = Math.atan2(h,w), where w represents offsetX minus half of the width of the Div box, and h represents half of the height of the DIV box minus offsetY, where offsetX represents the horizontal offset of the mouse event or the triggering event relative to the left edge of the element of the event, and offsetY represents the vertical offset of the mouse event or the triggering event relative to the top edge of the element of the event; and Monitor the mouse move event and determine the mouse move direction.

2. The method for determining the four directions of a mouse entering a DIV as described in claim 1, wherein the method for determining the four directions of a mouse entering a DIV comprises the steps of: creating an HTML file, calling a "!DOCTYPE html" statement to define the document type as HTML5.

3. The method for determining the four directions of the mouse entering the DIV as described in claim 1, wherein the method for determining the four directions of the mouse entering the DIV comprises the steps of: calling the "head" statement to define the page header, and calling the "body" statement to define the page body.

4. The method for determining the four directions of the mouse entering a DIV as claimed in claim 1, wherein the method for determining the four directions of the mouse entering a DIV comprises the steps of: calling a "script" " / script" statement as a tag, and writing a function for determining the direction in which the mouse enters the DIV in the tag.

5. The method for determining the four directions of the mouse entering the DIV as described in claim 1, wherein the method for determining the four directions of the mouse entering the DIV comprises the steps of: calling the "document.querySelector" statement to obtain the container of the entire area.

6. The method for determining the four directions of the mouse entering the DIV as described in any one of claims 1 to 5, wherein the method for determining the four directions of the mouse entering the DIV comprises the steps of: obtaining the position of the rectangular area event displayed in the current area in the browser visual window.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for determining the four directions in which the mouse enters a DIV as described in any one of claims 1 to 6 are performed.

8. A device for determining the four directions of a mouse entering a DIV, characterized in that: include: Memory, for storing software applications, The processor is used to execute the software application, and each program of the software application correspondingly executes each step of the method for determining the four directions of the mouse entering the DIV as described in any one of claims 1 to 6.

9. A system for determining the four directions of a mouse entering a DIV, applying the method for determining the four directions of a mouse entering a DIV as claimed in any one of claims 1 to 6, characterized in that: The system for judging the four directions of the mouse entering the DIV includes an HTML file processing module and a mouse direction judgment module. The HTML file processing module creates an HTML file and calls a tag code in the HTML file to write a function for judging the direction of the mouse entering. The mouse direction judgment module calls the function for judging the direction of the mouse entering, performs calculations, and judges the direction in which the mouse moves.

10. A system for determining the four directions of mouse entry into a DIV as described in claim 9, wherein the HTML file processing module includes a document type module, a page module and a tag module, the document type module calls the "!DOCTYPE html" statement to define the document type as HTML5, the page module calls the "head" statement to define the page header, and calls the "body" statement to define the page body; the tag module calls the "script" " / script" statement as a tag, and is used to write a function for determining the direction in which the mouse enters.

Images