[发明专利]实现鼠标事件穿透的方法、相关存储介质、设备和装置

说明书

本发明提供了一种实现鼠标事件穿透的方法，包括如下步骤：S1，检测是否存在上层DOM元素；S2，若存在所述上层DOM元素，则设置Canvas元素层的CSS属性，以使所述Canvas元素层不响应鼠标事件，此时，所述上层DOM元素响应鼠标事件；若不存在所述上层DOM元素，则执行步骤S3；S3，检测鼠标坐标的位置；S4，若所述鼠标坐标在所述Canvas元素层的子元素的范围内，则设置所述子元素的CSS属性，使所述子元素响应鼠标事件；若所述鼠标坐标的位置不在所述Canvas元素层的子元素范围内，则设置所述Canvas元素层的CSS属性，使所述Canvas元素层不响应鼠标事件，此时，下层DOM元素响应鼠标事件。还涉及相关的计算机可读存储介质、电子设备以及计算装置。

技术领域

本发明涉及互联网开发领域，具体涉及一种实现鼠标事件穿透的方法、相关的计算机可读存储介质、电子设备以及计算装置。

背景技术

随着HTML5技术的普及，其中的Canvas元素(可以理解为一张画布，可以通过API，在其中绘制各种各样的图形)，由于表现力强，性能优异，得到越来越广泛的应用。但是，Canvas元素是一整块矩形区域，即使其中没有绘制任何对象，也会占据整个空间，这样，在Canvas元素之下的其他页面元素，会由于Canvas在上面将所有鼠标事件接收了，而无法响应到鼠标事件，很多常见的功能都无法得到实现：比如鼠标手型、点击等。

而且当三个DOM元素层叠，中间是Canvas(Canvas整体是一个DOM元素)，Canvas内部又有一些子元素(非DOM)时，传统方案只能做到控制中间Canvas的整个部分响应或是不响应鼠标事件，无法做到根据Canvas中的内容进行区分，只能整体设置为响应手型，同时Canvas中的透明部分，也会阻挡下层接收事件。

因此，有必要提出一种新的实现鼠标事件穿透的方法。

发明内容

有鉴于此，为了克服上述问题的至少一个方面，本发明的实施例提供了一种实现鼠标事件穿透的方法。

根据本发明的一个方面，提供了一种实现鼠标事件穿透的方法，包括步骤：

S1，检测是否存在上层DOM元素；

S2，若存在所述上层DOM元素，则设置Canvas元素层的CSS属性，以使所述Canvas元素层不响应鼠标事件，此时，所述上层DOM元素响应鼠标事件；若不存在所述上层DOM元素，则执行步骤S3；

S3，检测鼠标坐标的位置；

S4，若所述鼠标坐标在所述Canvas元素层的子元素的范围内，则设置所述子元素的CSS属性，使所述子元素响应鼠标事件；若所述鼠标坐标的位置不在所述Canvas元素层的子元素范围内，则设置所述Canvas元素层的CSS属性，使所述Canvas元素层不响应鼠标事件，此时，下层DOM元素响应鼠标事件。

进一步地，步骤S1包括：

S11，利用elementFormPoint全局函数获取鼠标当前位置的第一个元素；

S12，判断所述第一个元素是否属于所述Canvas元素层；

S13，若所述第一个元素属于所述Canvas元素层，则说明不存在上层DOM元素；若所述第一个元素不属于所述Canvas元素层，则说明存在上层DOM元素。

进一步地，步骤S3包括：

S31，获取鼠标当前位置的全局坐标；

S32，将所述全局坐标转换为相对于所述Canvas元素层的相对坐标。

进一步地，步骤S4包括：

利用isPointInPath方法检测所述相对坐标是否在所述Canvas元素层的子元素的范围内。