Method, related storage medium, equipment and device for achieving mouse event penetration

Abstract

The present invention provides a method for achieving mouse event penetration. The method comprises the steps that S1, it is detected whether or not an upper layer DOM element exists; S2, if the upperlayer DOM element exist, a CSS attribute of a Canvas element layer is set, so that the Canvas element layer does not respond to a mouse event, and at this time, the upper layer DOM element responds to the mouse event; if the upper layer DOM element does not exist, step S3 is performed; S3, the position of a mouse coordinate is detected; S4, if the mouse coordinate is in the scope of sub-elementsof the Canvas element layer, CSS attributes of the sub-elements are set, so that the sub-elements respond to the mouse event; if the position of the mouse coordinate is not in the scope of sub-elements of the Canvas element layer, a CSS attribute of the Canvas element layer is set, so that the Canvas element layer does not respond to the mouse event, and at this time, a lower layer DOM element responds to the mouse event. The invention further relates to a related computer readable storage medium, electronic equipment, and computing device.

Description

technical field [0001] The invention relates to the field of Internet development, in particular to a method for realizing mouse event penetration, related computer-readable storage media, electronic equipment and computing devices. Background technique [0002] With the popularization of HTML5 technology, the Canvas element (which can be understood as a canvas on which various graphics can be drawn through the API) has been more and more widely used due to its strong expressiveness and excellent performance. However, the Canvas element is a whole rectangular area, even if no object is drawn in it, it will occupy the entire space. In this way, other page elements under the Canvas element will not be able to receive all mouse events because the Canvas has received all mouse events on it. In response to mouse events, many common functions cannot be implemented: such as mouse hand shape, click, etc. [0003] And when three DOM elements are stacked, the middle is Canvas (Canvas...

AI Technical Summary

Problems solved by technology

However, the Canvas element is a whole rectangular area, even if no object is drawn in it, it will occupy the entire space. In this way, other page elements under the Canvas element will not be able to receive all mouse events because the Canvas has received all mouse events on it. In response to mouse events, many common functions cannot be implemented: such as mouse hand shape, click, etc.

[0003] And when three DOM elements are stacked, the middle is Canvas (Canvas is a DOM element as a whole), and there are some sub-elements (non-DOM) inside Canvas, the traditional solution can only control whether the entire part of the middle Canvas responds or does not respond Mouse events cannot be distinguished according to the content in the Canvas, and can only be set to respond to the hand shape as a whole. At the same time, the transparent part in the Canvas will also block the lower layer from receiving events

Images