CN108304242A - 实现鼠标事件穿透的方法、相关存储介质、设备和装置 - Google Patents

Abstract

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

Description

实现鼠标事件穿透的方法、相关存储介质、设备和装置

技术领域

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

背景技术

随着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元素层的子元素的范围内。

进一步地，步骤S4包括：

所述子元素响应鼠标事件时，设置相应的鼠标指针。

进一步地，若存在所述上层DOM元素，将所述Canvas元素层的CSS属性中的pointer-events设置成none，使所述Canvas元素层不响应鼠标事件。

进一步地，若所述鼠标坐标在所述Canvas元素层的子元素的范围内，将所述子元素的CSS属性中的pointer-events设置成auto，使所述子元素响应鼠标事件。

本发明还提供一种计算机可读存储介质，其上存储有可执行指令，所述指令在由处理器执行时，实现如上所述的任一种实现鼠标事件穿透的方法的步骤。

本发明还提供了一种电子设备，其包括：

存储器，用于存储可执行指令；以及

处理器，用于执行所述存储器中存储的可执行指令，实现如上所述的任一种实现鼠标事件穿透的方法的步骤。

本发明还提供了一种计算装置，其包括：

输入设备，用于向所述计算装置输入信息或指令；

输出设备，用于从所述计算装置输出信息；以及

如上所述的电子设备。

与现有技术相比，本发明具有以下优点：本发明提出一种实现鼠标事件穿透的方法，通过结合鼠标位置检测以及CSS属性，并根据Canvas中的实际元素位置来响应事件。同时滑过透明部分时，也不影响下层元素响应鼠标事件。

附图说明

通过下文中参照附图对本发明所作的描述，本发明的其它目的和优点将显而易见，并可帮助对本发明有全面的理解。

图1为本发明实施例提供的实现鼠标事件穿透的方法的实施步骤的流程图；

图2为本发明实施例提供的计算机可读存储介质的结构示意图；

图3为本发明实施例提供的电子设备的结构示意图；

图4为本发明实施例提供的计算装置的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明实施例的附图，对本发明的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明的一个实施例，而不是全部的实施例。基于所描述的本发明的实施例，本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

除非另外定义，本发明使用的技术术语或者科学术语应当为本发明所属领域内具有一般技能的人士所理解的通常意义。

根据本发明的一个方面，提供了一种实现鼠标事件穿透的方法，具体实现思路如下：

在存在上层DOM元素的情况下，可以通过设置Canvas元素层的CSS属性，使得Canvas元素层不响应鼠标事件，此时，上层DOM元素响应鼠标事件；在不存在上层DOM元素的情况下，可以通过鼠标坐标在Canvas中的相对位置，对Canvas中的所有元素进行碰撞检测。当有碰撞时，说明此鼠标事件的响应对象应该是Canvas元素中的子元素，此时，可以通过设置子元素的CSS属性，让子元素本身接收鼠标事件，同时设置鼠标手型；如果没有发生碰撞，说明Canvas元素不是此事件的目标，应该穿透Canvas，让下层其他元素得到响应，此时，可以通过设置Canvas的CSS属性，让Canvas本身不接受鼠标事件，同时取消鼠标手型，这样事件就会由下层DOM元素来处理。

更具体的，下面结合附图对本发明实现鼠标事件穿透的方法进行详细的描述。

参考图1所示，本发明的实施例提供的鼠标事件穿透的方法，包括如下步骤：

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

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

在具体实施过程中，可以先在全局Window上，添加一个鼠标移动的事件监听器来处理鼠标动作。

例如：window.addEventListener(′mousemove′，onMouseMove)

在监听函数onMouseMove中，第一步，不能影响上层元素的鼠标响应，所以需要判断鼠标事件的目标对象是否是当前Canvas元素，这个可以通过浏览器提供的elementFromPoint全局函数来完成，此函数可以获取任意坐标下的第一个元素对象(当然类似的还有一个elementsFromPoint函数，可以获取坐标下的所有元素对象，不过我们这里只需要取第一个就可以了，因此为了性能考虑，使用elementFromPoint函数来完成)，为了能够使得Canvas能够被elementFromPoint检测到，在elementFromPoint检测之前，临时将Canvas的pointer-events设置为auto。这样，我们就得到了当前位置下的第一个元素，如果不是当前Canvas元素，说明上层有其他元素需要响应，那么当前Canvas应设置为不响应鼠标事件的状态，即将Canvas元素层的CSS属性中的pointer-events设置为none，此时，上层DOM元素响应鼠标事件；如果第一个元素就是当前Canvas元素，说明上层没有其他元素，需要继续进行下面的步骤。

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

在本实施例中，步骤S3可以进一步包括，

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

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

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

在具体实施过程中，当所述鼠标坐标在所述Canvas元素层的子元素的范围内时，可以将所述子元素的CSS属性中的pointer-events设置成auto，使所述子元素响应鼠标事件。

在本实施例中，可以利用isPointInPath方法检测所述相对坐标是否在所述Canvas元素层的子元素的范围内。

在本实施例中，步骤S4可以进一步包括：所述子元素响应鼠标事件时，设置相应的鼠标指针。

本实施例提出的实现鼠标事件穿透的方法，可以通过结合鼠标位置检测以及CSS属性，并根据Canvas中的实际元素位置来响应事件。同时滑过透明部分时，也不影响下层元素响应鼠标事件。

基于同一发明构思，参考图2所示，本发明的实施例还提供一种计算机可读存储介质201，其上存储有可执行指令202，所述可执行指令202在由一个或多个处理器执行时，可以实现如上实施例所述的任一种实现鼠标事件穿透的方法的步骤。

基于同一发明构思，参考图3所示，本发明实施例还提供了一种电子设备301，该电子设备301可以包括：

存储器310，其用于存储可执行指令311；以及

处理器320，其用于执行存储器310中存储的可执行指令311，以实现如上实施例所述的任一种实现鼠标事件穿透的方法的步骤。

参考图4所示，本发明还提供了一种计算装置401，该计算装置401包括用于向计算装置401输入信息或指令的输入设备402、用于从计算装置401输出信息的输出设备403以及如上所述的电子设备301。

对于本发明的实施例，还需要说明的是，在不冲突的情况下，本发明的实施例及实施例中的特征可以相互组合以得到新的实施例。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims (10)

1.一种实现鼠标事件穿透的方法，其特征在于，包括如下步骤：

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

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

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

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

2.如权利要求1所述的方法，其特征在于，步骤S1进一步包括：

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

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

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

3.如权利要求1所述的方法，其特征在于，步骤S3进一步包括：

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

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

4.如权利要求3所述的方法，其特征在于，步骤S4进一步包括：

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

5.如权利要求1所述的方法，其特征在于，步骤S4进一步包括：

所述子元素响应鼠标事件时，设置相应的鼠标指针。

6.如权利要求1所述的方法，其特征在于，若存在所述上层DOM元素，将所述Canvas元素层的CSS属性中的pointer-events设置成none，使所述Canvas元素层不响应鼠标事件。

7.如权利要求1所述的方法，其特征在于，若所述鼠标坐标在所述Canvas元素层的子元素的范围内，将所述子元素的CSS属性中的pointer-events设置成auto，使所述子元素响应鼠标事件。

8.一种计算机可读存储介质，其上存储有可执行指令，所述指令在由处理器执行时，实现如权利要求1-7中任一项所述的方法的步骤。

9.一种电子设备，包括：

存储器，用于存储可执行指令；以及

处理器，用于执行所述存储器中存储的可执行指令，以实现如权利要求1-7中任一项所述的方法的步骤。

10.一种计算装置，包括：

输入设备，用于向所述计算装置输入信息或指令；

输出设备，用于从所述计算装置输出信息；以及

如权利要求9所述的电子设备。