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

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

Method for realizing mouse event penetration, related storage medium, device and device

The present invention provides a method for implementing the mouse event penetration, including the following steps: S1, detecting whether there is an upper DOM element; S2, if the upper DOM element is present, the CSS attribute of the Canvas element layer is set so that the layer of the Canvas element does not respond to the mouse event, when the upper DOM element responds to the mouse event. If the upper DOM element is not present, then step S3; S3, the location of the mouse coordinates is detected; S4, if the mouse coordinates are within the range of the subelements of the Canvas element layer, the CSS attribute of the subelement is set to respond to the mouse event; if the position of the mouse coordinates is not in the Canvas Within the sub - element range of the element layer, the CSS attribute of the Canvas element layer is set, so that the Canvas element layer does not respond to the mouse event, at this point, the lower DOM element responds to the mouse event. It also involves related computer readable storage media, electronic devices and computing devices.

【技术实现步骤摘要】
实现鼠标事件穿透的方法、相关存储介质、设备和装置
本专利技术涉及互联网开发领域，具体涉及一种实现鼠标事件穿透的方法、相关的计算机可读存储介质、电子设备以及计算装置。
技术介绍
随着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元素，说明上层有其他元素需要响应，那么当前C本文档来自技高网...

【技术保护点】
1.一种实现鼠标事件穿透的方法，其特征在于，包括如下步骤：S1，检测是否存在上层DOM元素；S2，若存在所述上层DOM元素，则设置Canvas元素层的CSS属性，以使所述Canvas元素层不响应鼠标事件，此时，所述上层DOM元素响应鼠标事件；若不存在所述上层DOM元素，则执行步骤S3；S3，检测鼠标坐标的位置；S4，若所述鼠标坐标在所述Canvas元素层的子元素的范围内，则设置所述子元素的CSS属性，使所述子元素响应鼠标事件；若所述鼠标坐标的位置不在所述Canvas元素层的子元素范围内，则设置所述Canvas元素层的CSS属性，使所述Canvas元素层不响应鼠标事件，此时，下层DOM元素响应鼠标事件。

【技术特征摘要】
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，将所述全局坐标转换为相对于...

【专利技术属性】
技术研发人员：王兴伟，张文明，陈少杰，
申请(专利权)人：武汉斗鱼网络科技有限公司，
类型：发明
国别省市：湖北,42