一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法和装置与流程

本发明涉及计算机，尤其涉及一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法和装置。

背景技术：

1、随着互联网的普及和发展，人们和互联网的关系也越来越紧密。在技术的日新月异的迭代中，大量公司公司为了节约成本，提高工作效率，开始投入无代码开发平台或移动端h5组件库的建设。无代码开发平台和移动端h5组件库的文档站点通常都搭建在电脑终端浏览器内以方便用户快速访问。

2、在无代码开发平台系统建设中，快速搭建移动端h5应用是其系统架构中重要的组成部分。在电脑终端使用无代码开发平台配置移动端h5应用时，为了快速构建和人机交互操作习惯，用户人手操作鼠标控制电脑在浏览器内配置生成移动端h5应用。在电脑终端浏览器指定区域实时渲染预览移动端h5应用，模拟移动端h5应用的操作交互、预览其效果同样也是其重要功能组成部分。

3、在移动端h5组件库的架构设计中，文档站点的设计至关重要。通常组件库文档站点的设计中，文档站点可根据不同组件(如轮播图组件)在浏览器指定区域实时预览其示例在移动端h5的渲染效果和操作交互。这样，在浏览器指定区域实时渲染预览移动端h5应用，模拟移动端h5应用的操作交互、预览其效果同样也是其重要功能组成部分。

4、依据上述类型系统的架构设计方案，在浏览器指定区域模拟移动端人机操作交互的方法和装置极其存在必要性。

5、目前，电脑终端浏览器如果想依赖浏览器模拟触摸事件需要打开开发者工具，chrome浏览器还需要开启响应式调试模式，firebox浏览器不仅需要开启响应式模式，还需要开启触摸模式。这种操作模式在实际应用场景下，给用户带来了一定的操作复杂性，对于非计算机行业研发人员更是难以理解。而且，在实际应用操作场景下，无代码开发平台和移动端h5组件库文档站点让用户打开开发者模式进行调试是非常不人性化和极差用户体验的。用户需要在非响应式模式下来访问应用系统。

6、另外，在非响应式模式下，浏览器目前仅支持鼠标事件，不支持人手触摸滑动事件，更不支持浏览器指定区域触摸滑动事件。这对于在浏览器指定区域内实时预览h5应用，模拟h5应用的操作交互带来了一定技术障碍。

7、因此，需要一种新的方法和装置来处理浏览器指定区域模拟手机触摸滑动事件。以便更好的简化用户操作难度，提升用户操作体验。

技术实现思路

1、本发明提供了一种基于浏览器鼠标事件，在电脑浏览器指定区域内模拟手机触摸事件的方法和装置来满足实际应用场景，解决操作交互遇到的技术障碍。

2、为了实现上述目的，本发明采用以下技术方案：

3、本发明一方面提出一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法，包括：

4、步骤1，自定义触摸事件；包括：创建自定义事件，并将自定义事件名称赋值给自定义触摸事件，把鼠标事件的属性赋值给自定义触摸事件，根据鼠标事件获取活动状态的触摸点，根据鼠标事件创建触摸点列表，并派发自定义触摸事件；

5、步骤2，初始化触摸事件，指定浏览器上模拟手机滑动事件生效区域；

6、步骤3，监听鼠标事件；

7、步骤4，根据鼠标事件判定是否触发自定义触摸事件。

8、进一步地，所述自定义事件包括开始触摸事件、触摸移动事件、触摸结束事件。

9、进一步地，所述鼠标事件包括鼠标按下事件、鼠标移动事件、鼠标松起事件。

10、进一步地，所述鼠标事件的属性包括alt键是否被按下并保持住、ctrl键是否被按下并保持住、meta键是否被按下并保持住、shift键是否被按下并保持住。

11、进一步地，所述根据鼠标事件获取活动状态的触摸点，根据鼠标事件创建触摸点列表包括：

12、首先判定鼠标事件类型，如果是鼠标松起事件，则返回空的触摸点，否则根据鼠标事件，创建触摸点列表。

13、进一步地，所述根据鼠标事件创建触摸点列表包括：

14、根据鼠标距离浏览器内容区域左上角水平偏移量、鼠标距离浏览器内容区域左上角垂直偏移量、鼠标距离屏幕窗口左上角水平偏移量、鼠标距离屏幕窗口左上角垂直偏移量、鼠标距离浏览器内容窗口左上角水平偏移量、鼠标距离浏览器内容窗口左上角垂直偏移量、事件触发元素，所述事件触发元素保存有浏览器上模拟手机滑动事件生效区域坐标范围，得到鼠标的实时位置坐标，如果其位于上述坐标范围内，则将其作为触摸点，保存实时触摸点坐标，进而得到触摸点列表。

15、进一步地，所述步骤2包括：

16、首先判定窗口里是否包含开始触摸事件，如果不包含，则判定为当前页面不支持触摸事件，需要模拟手机触摸事件，然后将浏览器指定区域坐标范围保存在事件触发元素中，以使模拟手机触摸滑动事件在浏览器指定区域生效。

17、进一步地，所述步骤3包括：

18、在浏览器指定区域绑定需要监听的鼠标事件，将鼠标按下事件绑定为开始触摸事件，鼠标移动事件绑定为触摸移动事件，鼠标松起事件绑定为触摸结束事件，并设置触摸偏移量。

19、进一步地，所述步骤4包括：

20、当鼠标按下事件触发，则开启触摸事件；鼠标松起事件触发，则停止触摸事件；如果鼠标拖动，鼠标移动事件触发的同时且不允许执行触摸事件，则终止触摸事件；当鼠标第一次按下，且事件触发元素不存在或事件触发元素没有绑定派发的自定义触摸事件，则把鼠标事件元素赋给自定义触摸事件元素，然后执行自定义触摸事件，如果鼠标松起，触摸事件元素重置为空。

21、本发明另一方面提出一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的装置，包括：

22、触摸事件自定义模块，用于自定义触摸事件；包括：创建自定义事件，并将自定义事件名称赋值给自定义触摸事件，把鼠标事件的属性赋值给自定义触摸事件，根据鼠标事件获取活动状态的触摸点，根据鼠标事件创建触摸点列表，并派发自定义触摸事件；

23、触摸事件初始化模块，用于初始化触摸事件，指定浏览器上模拟手机滑动事件生效区域；

24、鼠标事件监听模块，用于监听鼠标事件；

25、判定模块，用于根据鼠标事件判定是否触发自定义触摸事件。

26、进一步地，所述自定义事件包括开始触摸事件、触摸移动事件、触摸结束事件。

27、进一步地，所述鼠标事件包括鼠标按下事件、鼠标移动事件、鼠标松起事件。

28、进一步地，所述鼠标事件的属性包括alt键是否被按下并保持住、ctrl键是否被按下并保持住、meta键是否被按下并保持住、shift键是否被按下并保持住。

29、进一步地，所述根据鼠标事件获取活动状态的触摸点，根据鼠标事件创建触摸点列表包括：

30、首先判定鼠标事件类型，如果是鼠标松起事件，则返回空的触摸点，否则根据鼠标事件，创建触摸点列表。

31、进一步地，所述根据鼠标事件创建触摸点列表包括：

32、根据鼠标距离浏览器内容区域左上角水平偏移量、鼠标距离浏览器内容区域左上角垂直偏移量、鼠标距离屏幕窗口左上角水平偏移量、鼠标距离屏幕窗口左上角垂直偏移量、鼠标距离浏览器内容窗口左上角水平偏移量、鼠标距离浏览器内容窗口左上角垂直偏移量、事件触发元素，所述事件触发元素保存有浏览器上模拟手机滑动事件生效区域坐标范围，得到鼠标的实时位置坐标，如果其位于上述坐标范围内，则将其作为触摸点，保存实时触摸点坐标，进而得到触摸点列表。

33、进一步地，所述触摸事件初始化模块包括：

34、首先判定窗口里是否包含开始触摸事件，如果不包含，则判定为当前页面不支持触摸事件，需要模拟手机触摸事件，然后将浏览器指定区域坐标范围保存在事件触发元素中，以使模拟手机触摸滑动事件在浏览器指定区域生效。

35、进一步地，所述鼠标事件监听模块包括：

36、在浏览器指定区域绑定需要监听的鼠标事件，将鼠标按下事件绑定为开始触摸事件，鼠标移动事件绑定为触摸移动事件，鼠标松起事件绑定为触摸结束事件，并设置触摸偏移量。

37、进一步地，所述判定模块包括：

38、当鼠标按下事件触发，则开启触摸事件；鼠标松起事件触发，则停止触摸事件；如果鼠标拖动，鼠标移动事件触发的同时且不允许执行触摸事件，则终止触摸事件；当鼠标第一次按下，且事件触发元素不存在或事件触发元素没有绑定派发的自定义触摸事件，则把鼠标事件元素赋给自定义触摸事件元素，然后执行自定义触摸事件，如果鼠标松起，触摸事件元素重置为空。

39、与现有技术相比，本发明具有的有益效果：

40、本发明在浏览器指定区域通过鼠标事件模拟手机触摸滑动事件，对于移动端无代码开发平台建设和移动端组件库文档站点建设起着基础支撑作用。同时，用户不需要依赖开发者工具便可直观体验移动端人机交互，降低了操作难度，增强了用户体验。