Page element click control method and device, computer device, and storage medium
By setting animation properties when page elements are clicked and detecting the animation's running status, repeated clicks are prevented, thus solving the server pressure problem caused by repeated clicks on page elements and achieving faster page loading and access speeds.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- IND BANK CO
- Filing Date
- 2023-03-20
- Publication Date
- 2026-06-19
AI Technical Summary
In existing technologies, repeated clicks on page elements increase server load, and solutions using JavaScript or external resource libraries require complex implementation code, affecting page loading and access speed.
By setting the animation properties of page elements to the target animation information, the target animation is run, and clicks are disabled while the animation is running, thus avoiding repeated clicks.
It simplifies the code implementation process, improves page loading and access speed, and reduces server load.
Smart Images
Figure CN116643679B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, computer device, storage medium, and computer program product for controlling page element clicks. Background Technology
[0002] With the development of computer technology, the problem of repeated clicks on page elements in front-end development projects is a common phenomenon. For example, when submitting a form in a system, the submit button is prone to repeated clicks, and repeated clicks in a short period of time can put a lot of pressure on the server.
[0003] In traditional technologies, JavaScript or external resource libraries are typically used to avoid frequent function execution, thereby reducing the server load caused by repeated clicks on page elements.
[0004] However, using JavaScript or importing external libraries often requires building complex implementation code, which typically takes a long time to run, thus affecting page loading and access speed. Summary of the Invention
[0005] Therefore, it is necessary to provide a page element click control method, device, computer equipment, computer-readable storage medium, and computer program product that can improve page loading speed and access speed, in order to address the above-mentioned technical problems.
[0006] Firstly, this application provides a method for controlling clicks on page elements. The method includes:
[0007] In response to a click action triggered on a page element, the animation attribute information of the page element is set to the target animation information;
[0008] Based on the target animation information, run the target animation corresponding to the page element;
[0009] If the target animation is detected to be running, the page element will be set to an unclickable state.
[0010] In one embodiment, the step of setting the page element to a disabled clickable state if the target animation is detected to be running includes:
[0011] Determine the start and end state information corresponding to the animation keyframes in the target animation; detect the animation running state of the target animation based on the start and end state information;
[0012] If the animation's running status changes from stopped to running, the CSS pointer property of the page element is set to disable clickability.
[0013] In one embodiment, after the step of setting the CSS pointer property of the page element to disable clickable if the animation running state changes from stopped to running is detected, the following steps are included:
[0014] If the animation's running state changes from running to stopped, the CSS pointer property of the page element is set to allow click, and the animation attribute information of the page element is set to no animation state information.
[0015] In one embodiment, before setting the animation attribute information of the page element to the target animation information in response to a click action triggered on the page element, the method further includes:
[0016] In response to a style class operation instruction, a corresponding style class is set for the page element, and the animation attribute information of the page element is set in the style class; in response to an animation information association instruction, the animation keyframes in the target animation are associated with the target animation information in the animation attribute information, wherein the target animation information is used to control the running of the target animation; in response to a pointer attribute association instruction, the start and end state information of the animation keyframes are associated with the CSS pointer attribute of the page element, wherein the start and end state information is used to control the CSS pointer attribute to switch between disabled and enabled click.
[0017] In one embodiment, setting the animation attribute information of the page element in the style class includes:
[0018] A pseudo-class is bound to the style class; the animation attribute information of the page element is encoded in the pseudo-class, and the animation attribute information is initialized to a no-animation state. The pseudo-class is used to respond to click behavior triggered by the page element.
[0019] In one embodiment, the method further includes:
[0020] In response to the instruction to adjust the click-disable duration, the animation playback duration in the target animation information is adjusted.
[0021] Secondly, this application also provides a page element click control device. The device includes:
[0022] An animation operation control module is used to respond to click behavior triggered on a page element and set the animation attribute information of the page element to the target animation information.
[0023] An animation execution module is used to run the target animation corresponding to the page element according to the target animation information;
[0024] The click status setting module is used to set the page element to a disabled click state if the target animation is detected to be running.
[0025] Thirdly, this application also provides a computer device. The computer device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to perform the following steps:
[0026] In response to a click action triggered on a page element, the animation attribute information of the page element is set as the target animation information; the target animation corresponding to the page element is run according to the target animation information; if the animation running status of the target animation is detected to be running, the page element is set to a disabled click state.
[0027] Fourthly, this application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program thereon, which, when executed by a processor, performs the following steps:
[0028] In response to a click action triggered on a page element, the animation attribute information of the page element is set as the target animation information; the target animation corresponding to the page element is run according to the target animation information; if the animation running status of the target animation is detected to be running, the page element is set to a disabled click state.
[0029] Fifthly, this application also provides a computer program product. The computer program product includes a computer program that, when executed by a processor, performs the following steps:
[0030] In response to a click action triggered on a page element, the animation attribute information of the page element is set as the target animation information; the target animation corresponding to the page element is run according to the target animation information; if the animation running status of the target animation is detected to be running, the page element is set to a disabled click state.
[0031] The aforementioned page element click control method, apparatus, computer device, storage medium, and computer program product, in response to a click behavior triggered on a page element, set the animation attribute information of the page element to target animation information. That is, when a click behavior occurs on a page element, the animation attribute information of the page element is automatically set to target animation information. This allows the corresponding target animation to run based on the target animation information bound to the page element. Furthermore, when the target animation is detected to be running, the page element is set to a disabled click state. After a single click behavior occurs on a page element, the target animation runs, and the page element cannot be clicked again during the target animation's execution, thus preventing repeated clicks. Moreover, this application achieves the disabled click method by setting the animation attribute information of the page element, requiring only simple setting of the element's animation attribute information on the front end, without the need for complex implementation code. The entire implementation process is simpler and the code execution is faster, thus improving page loading and access speeds. Attached Figure Description
[0032] Figure 1 This is a flowchart illustrating a page element click control method in one embodiment;
[0033] Figure 2 This is a flowchart illustrating step 206 in one embodiment;
[0034] Figure 3 This is a flowchart illustrating a page element click control method in another embodiment;
[0035] Figure 4 This is a structural block diagram of a page element click control device in one embodiment;
[0036] Figure 5 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation
[0037] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.
[0038] In one embodiment, such as Figure 1 As shown, a method for controlling page element clicks is provided. This embodiment illustrates the application of this method to a terminal. It is understood that this method can also be applied to a server, and to a system including both a terminal and a server, and implemented through interaction between the terminal and the server. In this embodiment, the method includes the following steps:
[0039] Step 202: In response to a click action triggered on a page element, set the animation attribute information of the page element to the target animation information.
[0040] It should be noted that page elements can be clickable elements on the page, such as clickable buttons, clickable text, or clickable images; click behavior can be a click behavior generated by the user through an input device, such as a mouse, keyboard, or gamepad.
[0041] Animation attribute information includes CSS animation properties and status information set for page elements using CSS. For example, CSS animation properties can include animation name, animation curve, animation direction, and animation duration. Status information can indicate whether there is an animation or not. There are two types of status information: no animation status, in which case no animation playback or operation is required; and animation status, in which case the animation playback or operation is required. Animation attribute information will include animation name, animation curve, animation direction, and animation duration. No animation information and animation status can be represented by different tags. For example, tag A can be used to represent no animation status, and tag B can be used to represent animation status.
[0042] As an example, the animation property information can also be left blank. When the animation property information is empty, it means that the animation does not need to be played or run at this time. When the animation property information is the target animation information, it means that the animation needs to be played or run at this time.
[0043] As an example, step 202 includes: in response to a click on a page element, changing the animation property information of the page element from non-animation state information to an animated state information, and adding target animation information to the animation property information.
[0044] Step 204: Run the target animation corresponding to the page element according to the target animation information.
[0045] Among them, the target animation information is the attribute information used to control the running or playback of the target animation, such as the animation name, animation curve, animation forward direction, and animation playback time; running the target animation refers to running the playback process corresponding to the target animation in the background. At this time, the target animation can be played and displayed on the page or not, which is not limited here.
[0046] Step 206: If the target animation is detected to be running, then the page element is set to an unclickable state.
[0047] It should be noted that animation running status can be divided into two types: running, meaning the animation playback process is in progress, and stopped, meaning the animation playback process has stopped. Page elements also have two states: one is a disabled click state, in which the page element will not respond to click behavior, and the other is a clickable state, in which the page element will respond to click behavior.
[0048] As an example, step 206 includes: detecting the animation running state of the target animation based on the animation keyframe information in the target animation; if the animation running state is detected to change from stopped to running, then the page element is adjusted from clickable to disabled.
[0049] As an example, if an animation's running status changes from running to stopped, the page element is changed from being disabled to being clickable.
[0050] In the above-described page element click control method, the animation attribute information of the page element is set to the target animation information in response to a click action triggered on the page element. That is, when a click action occurs on a page element, the animation attribute information of the page element is automatically set to the target animation information. This allows the corresponding target animation to run according to the target animation information bound to the page element. When the target animation is detected to be running, the page element is set to a disabled click state. In other words, after a click action occurs on the page element, the target animation will run, and the page element cannot be clicked again during the execution of the target animation. This avoids the situation where the page element is clicked repeatedly. In this embodiment, the method of preventing repeated clicks on the page element is achieved by setting the animation attribute information of the page element. It only requires setting the animation attribute of the element on the front end, without running complex implementation code. The entire implementation process is simpler and the code execution process is faster, thus improving the page loading speed and access speed.
[0051] In one embodiment, such as Figure 2 As shown, if the target animation is detected to be running, the page elements will be set to an inactive state, including:
[0052] Step 302: Determine the start and end state information corresponding to the animation keyframes in the target animation.
[0053] It should be noted that the start and end status information is information that reflects the start and end of the target animation. For example, it can be a set start time and end time. This start and end status information can be carried by the animation keyframes.
[0054] As an example, an animation keyframe can be the first frame of the target animation, the last frame of the target animation, or a frame in the middle of the target animation; there is no limitation here.
[0055] As an example, step 302 includes: determining the animation keyframes of the target animation, obtaining the animation keyframe information of the animation keyframes, extracting the start time and end time of the target animation from the animation keyframe information, and using the start time and end time as start and end state information.
[0056] Step 304: Detect the animation running status of the target animation based on the start and end status information.
[0057] The start and end status information includes the set start time and set end time of the target animation.
[0058] As an example, step 304 includes: obtaining the current time; if the current time is earlier than the set start time or later than the set end time, then determining that the animation running status of the target animation is stopped; if the current time is later than the set start time but earlier than the set end time, then determining that the animation running status of the target animation is running.
[0059] As an example, step 304 includes: obtaining the current time; if the current time is equal to the set start time, then determining that the animation running state of the target animation has changed from stopped to running; if the current time is equal to the set end time, then determining that the animation running state of the target animation has changed from running to stopped.
[0060] Step 306: If the animation running status is detected to change from stopped to running, then set the CSS pointer property of the page element to disable clickability.
[0061] It's important to note that the CSS pointer property can be `pointer-events`, used to control whether page elements can be clicked. For example, when the CSS pointer property is set to "disable clicks," users cannot click on page elements; that is, the page elements will not respond to clicks. When the CSS pointer property is set to "allow clicks," users can click on page elements; that is, the page elements will respond to clicks. The CSS pointer property is also bound to the animation's running state; that is, the CSS pointer property can change as the animation's running state changes. For example, if the animation is running, the CSS pointer property will be bound to "disable clicks," and if the animation is stopped, the CSS pointer property will be bound to "allow clicks."
[0062] As an example, step 306 includes: if the animation running state is detected to change from stopped to running, then the CSS pointer property of the page element is adjusted from clickable to disabled.
[0063] In this embodiment, the animation running state of the target animation can be determined by detecting the start and end status information of the animation keyframes. The animation running state of the target animation is bound to the CSS pointer property of the page element. Thus, if the animation running state changes from stopped to running, the CSS pointer property of the page element can be set to disable clicks, preventing further clicks on the page element. Therefore, this embodiment can prevent repeated clicks on the page element after it has been clicked once, thereby reducing the pressure on the server caused by repeated clicks and improving page loading and access speeds. Furthermore, this embodiment only requires adjusting the pointer property of the page element according to the start and end status information of the animation keyframes to prevent repeated clicks. This process involves only a simple front-end implementation and does not require complex back-end implementation code. Therefore, the response speed to click behavior is faster, further accelerating page loading and access speeds.
[0064] In one embodiment, after detecting a change in animation running status from stopped to running, setting the CSS pointer property of the page element to disable clickability includes:
[0065] If the animation status changes from running to stopped, the CSS pointer property of the page element is set to allow click, and the animation property information of the page element is set to no animation status.
[0066] As an example, if the animation status changes from running to stopped, the CSS pointer property of the page element is changed from disabled to enabled, and the animation property information of the page element is initialized from the target animation property to no animation state information.
[0067] In this embodiment, if the animation's running state changes from running to stopped, the CSS pointer property of the page element will be set to clickable. This allows the CSS pointer property to be switched between click-disabled and click-enabled based on the animation's running state. Thus, while the target animation is running, the page element is in a click-disabled state, and after the target animation ends, the page element will return to a click-enabled state. This achieves the goal of temporarily preventing repeated clicks on the page element. Furthermore, this embodiment also initializes the page element's animation attribute information from the target animation attribute to a no-animation state. That is, while the page element returns to a click-enabled state, its animation attribute information is also initialized. This ensures that the page element can still prevent repeated clicks the next time it responds to a click, guaranteeing the reusability of the method used to prevent repeated clicks in this embodiment.
[0068] In one embodiment, the page element click control method further includes:
[0069] In response to the instruction to adjust the click-disable duration, adjust the animation playback duration in the target animation information.
[0070] In this embodiment, when the animation running state changes from running to stopped, the CSS pointer property of the page element is adjusted from disabled to clickable. When the animation running state changes from stopped to running, the CSS pointer property of the page element is adjusted from clickable to disabled. Therefore, the page element will be in a disabled state during the running period of the target animation, and the disabled duration of the page element will be equal to the running duration of the target animation.
[0071] As an example, in response to the instruction to adjust the click-prohibition duration, the animation playback duration in the target animation information is adjusted. This allows the purpose of adjusting the click-prohibition duration of page elements to be achieved by adjusting the playback duration of the target animation. Therefore, the click-prohibition duration of page elements in this embodiment is flexible and adjustable, thus improving the flexibility of the method of prohibiting repeated clicks on page elements in a short period of time.
[0072] In one embodiment, such as Figure 3 As shown, before setting the animation attribute information of the page element to the target animation information in response to a click action triggered on the page element, the method further includes:
[0073] Step 402: In response to the style class operation instruction, set the corresponding style class for the page element, and set the target animation information of the page element in the style class.
[0074] Step 404: In response to the animation information association instruction, the animation keyframes in the target animation are associated with the target animation information in the animation attribute information, wherein the target animation information is used to control the running of the target animation.
[0075] Step 406: In response to the pointer property association instruction, associate the start and end state information of the animation keyframe with the CSS pointer property of the page element. The start and end state information is used to control the CSS pointer property to switch between disabled and enabled click.
[0076] It should be noted that style classes can be written in CSS files. These style classes determine the style of page elements, and the styles can include width, height, border, background color, and animation properties. Animation properties can have two states: no animation state and animation state. For the animation state, there will be corresponding target animation information. This target animation information is used to control the execution of the target animation corresponding to the page element. The target animation information can specifically include the target animation name, animation curve, forward direction, and animation playback time.
[0077] As an example, steps 402 to 406 include: in response to a style class operation instruction, binding a corresponding style class to a page element, setting animation attribute information corresponding to the page element in the style class, wherein the animation attribute information includes animation state information and target animation information, the animation state information is used to identify whether an animation is running, including no animation state information and animation state information, the target animation information is used to control the animation operation, including the target animation name, animation curve, forward direction, and animation playback duration; in response to an animation information association instruction, binding the animation keyframes in the target animation with the target animation name, wherein the target animation name is used to control the animation operation in response to a page element operation instruction. After a page element is clicked, the corresponding target animation is located. The target animation information is used to control the execution of the corresponding target animation. In response to the pointer property association instruction, the start and end state information of the animation keyframes is associated with the CSS pointer property of the page element. The start and end state information is used to represent the animation running state of the target animation, and the CSS pointer property changes with the animation running state. That is, when the animation is running, the CSS pointer property changes to disable click, and when the animation is stopped, the CSS pointer property changes to enable click. Therefore, the start and end state information can be used to control the CSS pointer property to switch between disable click and enable click.
[0078] In this embodiment, in response to style class operation instructions, a corresponding style class is set for the page element, and the animation attribute information of the page element is set in the style class; in response to animation information association instructions, the animation keyframes in the target animation are associated with the target animation information in the animation attribute information, so that when responding to a click behavior triggered on the page element, the target animation information can be used to control the corresponding target animation; in response to pointer attribute association instructions, the start and end state information of the animation keyframes are associated with the CSS pointer attribute of the page element, so that after determining that the target animation has started running based on the start and end state information, the CSS pointer attribute can be switched. To disable clicks, after determining that the target animation has stopped running based on the start and end status information, the CSS pointer property can be switched to allow clicks. This allows the CSS pointer property to switch between disabling and allowing clicks. Therefore, in this embodiment, the page element can be temporarily put into a disabling state during the execution of the target animation, thus preventing repeated clicks on the page element for a short period of time. Furthermore, in this embodiment, the page element can be edited in the front-end style class without the need for complex back-end implementation code, making the implementation simpler and easier to maintain later, reducing maintenance costs. It is also not limited by language frameworks, i.e., it is not limited to the JavaScript language.
[0079] In one embodiment, setting animation property information for page elements in a style class includes:
[0080] Bind pseudo-classes in style classes; encode the animation property information of page elements in pseudo-classes, and set the initial state of the animation property to no animation. The pseudo-classes are used to respond to click behavior triggered by page elements.
[0081] It should be noted that page elements cannot directly trigger the playback of target animations by responding to click behavior. Therefore, in this embodiment, pseudo-classes are bound in the style class to respond to click behavior triggered on page elements. The pseudo-class can be active.
[0082] As an example, a pseudo-class is bound in the style class; the animation attribute information of the page element is encoded in the pseudo-class, and the animation attribute information is initialized to a no-animation state. In this way, after the page element is clicked, the pseudo-class will switch the no-animation state information in the animation attribute information to an animated state information and add target animation information. Based on the target animation information, the corresponding target animation can be controlled to run. In this embodiment, a response chain is established between the target animation and the page element click behavior, so that the target animation can start running in response to the page element click behavior.
[0083] In one embodiment, in response to a click on a page element, the animation attribute information of the page element is changed from no animation state to animated state, and target animation information is added. Based on the target animation name in the target animation information, the corresponding target animation is found. Based on the animation curve, direction of movement, and duration of the animation in the target animation information, the target animation is started. Thus, in this embodiment, after a click occurs, the target animation corresponding to the page element can be controlled to start running. The start and end state information corresponding to the animation keyframes in the target animation is determined, where the start and end state information includes the set start time and set end time of the target animation. The current time is obtained, and based on the current time, set start time, and set end time, the animation running status of the target animation is detected. If the animation running status changes from stopped to running, the CSS pointer property of the page element is switched from clickable to disabled. If the animation running status changes from running to stopped, the page element's CSS pointer property is changed from clickable to disabled. The CSS pointer property of the element is switched from "disabled" to "allowed," and the animation property information of the page element is set to "no animation." In this embodiment, after the target animation starts running, the animation status of the target animation is monitored synchronously. When the animation status changes, the CSS pointer property of the page element changes accordingly. That is, the CSS pointer property is switched to "disabled" while the target animation is running, and switched to "allowed" when the target animation stops running. Therefore, this embodiment can prevent clicking on the page element for a short period of time during the target animation playback, thus preventing repeated clicking on the page element for a short period. Furthermore, since the animation property information of the page element is initialized to "no animation" after the target animation stops running, it can still respond to the click behavior the next time it occurs. This achieves the goal of preventing repeated clicking on the page element for a short period and can continuously prevent repeated clicking on the page element each time a click behavior is responded to.
[0084] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages of other steps.
[0085] Based on the same inventive concept, this application also provides a page element click control device for implementing the page element click control method described above. The solution provided by this device is similar to the solution described in the above method; therefore, the specific limitations in one or more embodiments of the page element click control device provided below can be found in the limitations of the page element click control method described above, and will not be repeated here.
[0086] In one embodiment, such as Figure 4 As shown, a page element click control device is provided, including: an animation attribute information setting module 502, an animation running module 504, and a click state setting module 506, wherein:
[0087] The animation operation control module 502 is used to set the animation attribute information of the page element as the target animation information in response to a click behavior triggered on a page element.
[0088] The animation execution module 504 is used to run the target animation corresponding to the page element according to the target animation information.
[0089] The click status setting module 506 is used to set the page element to a disabled click state if the target animation is detected to be running.
[0090] In one embodiment, the click state setting module 506 is further configured to:
[0091] Determine the start and end state information corresponding to the animation keyframes in the target animation; based on the start and end state information, detect the animation running state of the target animation; if the animation running state changes from stopped to running, then set the CSS pointer property of the page element to disable clickability.
[0092] In one embodiment, the device further includes:
[0093] The pointer property and animation property setting module (not shown in the figure) is used to set the CSS pointer property of the page element to clickable and set the animation property information of the page element to no animation state information if the animation running state is detected to change from running to stopped.
[0094] In one embodiment, the device further includes:
[0095] The page element style setting module (not shown in the figure) is used to respond to style class operation instructions, set corresponding style classes for page elements, and set the animation attribute information of the page elements in the style classes; respond to animation information association instructions, associate the animation keyframes in the target animation with the target animation information in the animation attribute information, wherein the target animation information is used to control the running of the target animation; respond to pointer attribute association instructions, associate the start and end state information of the animation keyframes with the CSS pointer attribute of the page element, wherein the start and end state information is used to control the CSS pointer attribute to switch between disabled and enabled click.
[0096] In one embodiment, the page element style setting module is further configured to:
[0097] A pseudo-class is bound to the style class; the animation attribute information of the page element is encoded in the pseudo-class, and the animation attribute information is initialized to a no-animation state. The pseudo-class is used to respond to click behavior triggered by the page element.
[0098] In one embodiment, the device further includes:
[0099] The disabling duration adjustment module (not shown in the figure) is used to adjust the animation playback duration in the target animation information in response to the instruction to adjust the disabling duration.
[0100] The modules in the aforementioned page element click control device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in the processor of a computer device in hardware form or independent of it, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.
[0101] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 5As shown, the computer device includes a processor, memory, communication interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, NFC (Near Field Communication), or other technologies. When executed by the processor, the computer program implements a page element click control method. The display screen can be an LCD screen or an e-ink screen. The input devices can be a touch layer covering the display screen, buttons, a trackball, or a touchpad on the computer device's casing, or an external keyboard, touchpad, or mouse.
[0102] Those skilled in the art will understand that Figure 5 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.
[0103] In one embodiment, a computer device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to perform the following steps:
[0104] In response to a click action triggered on a page element, the animation attribute information of the page element is set to the target animation information;
[0105] Based on the target animation information, run the target animation corresponding to the page element;
[0106] If the target animation is detected to be running, the page element will be set to an unclickable state.
[0107] In one embodiment, the processor, when executing a computer program, also performs the following steps:
[0108] Determine the start and end state information corresponding to the animation keyframes in the target animation; based on the start and end state information, detect the animation running state of the target animation; if the animation running state changes from stopped to running, then set the CSS pointer property of the page element to disable clickability.
[0109] In one embodiment, the processor, when executing a computer program, also performs the following steps:
[0110] If the animation's running state changes from running to stopped, the CSS pointer property of the page element is set to allow click, and the animation attribute information of the page element is set to no animation state information.
[0111] In one embodiment, the processor, when executing a computer program, also performs the following steps:
[0112] In response to a style class operation instruction, a corresponding style class is set for the page element, and the animation attribute information of the page element is set in the style class; in response to an animation information association instruction, the animation keyframes in the target animation are associated with the target animation information in the animation attribute information, wherein the target animation information is used to control the running of the target animation; in response to a pointer attribute association instruction, the start and end state information of the animation keyframes are associated with the CSS pointer attribute of the page element, wherein the start and end state information is used to control the CSS pointer attribute to switch between disabled and enabled click.
[0113] In one embodiment, the processor, when executing a computer program, also performs the following steps:
[0114] A pseudo-class is bound to the style class; the animation attribute information of the page element is encoded in the pseudo-class, and the animation attribute information is initialized to a no-animation state. The pseudo-class is used to respond to click behavior triggered by the page element.
[0115] In one embodiment, the processor, when executing a computer program, also performs the following steps:
[0116] In response to the instruction to adjust the click-disable duration, the animation playback duration in the target animation information is adjusted.
[0117] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon, the computer program performing the following steps when executed by a processor:
[0118] In response to a click action triggered on a page element, the animation attribute information of the page element is set to the target animation information;
[0119] Based on the target animation information, run the target animation corresponding to the page element;
[0120] If the target animation is detected to be running, the page element will be set to an unclickable state.
[0121] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0122] Determine the start and end state information corresponding to the animation keyframes in the target animation; based on the start and end state information, detect the animation running state of the target animation; if the animation running state changes from stopped to running, then set the CSS pointer property of the page element to disable clickability.
[0123] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0124] If the animation's running state changes from running to stopped, the CSS pointer property of the page element is set to allow click, and the animation attribute information of the page element is set to no animation state information.
[0125] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0126] In response to a style class operation instruction, a corresponding style class is set for the page element, and the animation attribute information of the page element is set in the style class; in response to an animation information association instruction, the animation keyframes in the target animation are associated with the target animation information in the animation attribute information, wherein the target animation information is used to control the running of the target animation; in response to a pointer attribute association instruction, the start and end state information of the animation keyframes are associated with the CSS pointer attribute of the page element, wherein the start and end state information is used to control the CSS pointer attribute to switch between disabled and enabled click.
[0127] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0128] A pseudo-class is bound to the style class; the animation attribute information of the page element is encoded in the pseudo-class, and the animation attribute information is initialized to a no-animation state. The pseudo-class is used to respond to click behavior triggered by the page element.
[0129] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0130] In response to the instruction to adjust the click-disable duration, the animation playback duration in the target animation information is adjusted.
[0131] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, performs the following steps:
[0132] In response to a click action triggered on a page element, the animation attribute information of the page element is set to the target animation information;
[0133] Based on the target animation information, run the target animation corresponding to the page element;
[0134] If the target animation is detected to be running, the page element will be set to an unclickable state.
[0135] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0136] Determine the start and end state information corresponding to the animation keyframes in the target animation; based on the start and end state information, detect the animation running state of the target animation; if the animation running state changes from stopped to running, then set the CSS pointer property of the page element to disable clickability.
[0137] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0138] If the animation's running state changes from running to stopped, the CSS pointer property of the page element is set to allow click, and the animation attribute information of the page element is set to no animation state information.
[0139] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0140] In response to a style class operation instruction, a corresponding style class is set for the page element, and the animation attribute information of the page element is set in the style class; in response to an animation information association instruction, the animation keyframes in the target animation are associated with the target animation information in the animation attribute information, wherein the target animation information is used to control the running of the target animation; in response to a pointer attribute association instruction, the start and end state information of the animation keyframes are associated with the CSS pointer attribute of the page element, wherein the start and end state information is used to control the CSS pointer attribute to switch between disabled and enabled click.
[0141] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0142] A pseudo-class is bound to the style class; the animation attribute information of the page element is encoded in the pseudo-class, and the animation attribute information is initialized to a no-animation state. The pseudo-class is used to respond to click behavior triggered by the page element.
[0143] In one embodiment, when the computer program is executed by a processor, it further performs the following steps:
[0144] In response to the instruction to adjust the click-disable duration, the animation playback duration in the target animation information is adjusted.
[0145] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.
[0146] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, etc., and are not limited to these.
[0147] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.
[0148] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.
Claims
1. A method for page element click control, the method comprising: The method includes: In response to a click action triggered on a page element, the animation attribute information of the page element is set to the target animation information; Based on the target animation information, run the target animation corresponding to the page element; If the target animation is detected to be running, then the page element is set to an unclickable state; The method further includes, before setting the animation attribute information of the page element to the target animation information in response to a click action triggered on the page element: In response to style class operation instructions, a corresponding style class is set for the page element, and a pseudo class is bound in the style class. The animation attribute information of the page element is encoded in the pseudo class, and the animation attribute information is initialized to a no-animation state. The pseudo class is used to respond to click behavior triggered for the page element. In response to the animation information association instruction, the animation keyframes in the target animation are associated with the target animation information in the animation attribute information, wherein the target animation information is used to control the running of the target animation; In response to the pointer property association instruction, the start and end state information of the animation keyframe is associated with the CSS pointer property of the page element, wherein the start and end state information is used to control the CSS pointer property to switch between disabling click and allowing click.
2. The method of claim 1, wherein, If the target animation is detected to be running, then setting the page element to a disabled clickable state includes: Determine the start and end state information corresponding to the animation keyframes in the target animation; Based on the start and end status information, detect the animation running status of the target animation; If the animation's running status changes from stopped to running, the CSS pointer property of the page element is set to disable clickability.
3. The method of claim 2, wherein, After detecting that the animation's running state changes from stopped to running, and then setting the CSS pointer property of the page element to disable clickability, the following steps are included: If the animation's running state changes from running to stopped, the CSS pointer property of the page element is set to allow click, and the animation attribute information of the page element is set to no animation state information.
4. The method of claim 2, wherein, The method further includes: In response to the instruction to adjust the click-disable duration, the animation playback duration in the target animation information is adjusted.
5. A page element click control apparatus, characterized by, The device includes: The page element style setting module is used to respond to style class operation instructions, set corresponding style classes for page elements, bind pseudo-classes in the style classes, encode the animation attribute information of the page elements in the pseudo-classes, and initialize the animation attribute information to a no-animation state. The pseudo-classes are used to respond to click behavior triggered by the page elements. In response to animation information association instructions, the module associates animation keyframes in the target animation with target animation information in the animation attribute information. The target animation information is used to control the execution of the target animation. In response to pointer attribute association instructions, the module associates the start and end state information of the animation keyframes with the CSS pointer properties of the page elements. The start and end state information is used to control the CSS pointer properties to switch between disabled and enabled clicks. The animation attribute information setting module is used to set the animation attribute information of the page element as the target animation information in response to the click behavior triggered on the page element; An animation execution module is used to run the target animation corresponding to the page element according to the target animation information; The click status setting module is used to set the page element to a disabled click state if the target animation is detected to be running.
6. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 4.
7. A computer-readable storage medium having stored thereon a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 4.
8. A computer program product comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 4.