一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法和装置制造方法及图纸

本发明专利技术公开一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法和装置，该方法包括，自定义触摸事件：创建自定义事件，并将自定义事件名称赋值给自定义触摸事件，把鼠标事件的属性赋值给自定义触摸事件，根据鼠标事件获取活动状态的触摸点，根据鼠标事件创建触摸点列表，并派发自定义触摸事件；初始化触摸事件，指定浏览器上模拟手机滑动事件生效区域；监听鼠标事件；根据鼠标事件判定是否触发自定义触摸事件

【技术实现步骤摘要】
一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法和装置


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

技术介绍

[0002]随着互联网的普及和发展，人们和互联网的关系也越来越紧密
。
在技术的日新月异的迭代中，大量公司公司为了节约成本，提高工作效率，开始投入无代码开发平台或移动端
H5
组件库的建设
。
无代码开发平台和移动端
H5
组件库的文档站点通常都搭建在电脑终端浏览器内以方便用户快速访问
。
[0003]在无代码开发平台系统建设中，快速搭建移动端
H5
应用是其系统架构中重要的组成部分
。
在电脑终端使用无代码开发平台配置移动端
H5
应用时，为了快速构建和人机交互操作习惯，用户人手操作鼠标控制电脑在浏览器内配置生成移动端
H5
应用
。
在电脑终端浏览器指定区域实时渲染预览移动端
H5
应用，模拟移动端
H5
应用的操作交互
、
预览其效果同样也是其重要功能组成部分
。
[0004]在移动端
H5
组件库的架构设计中，文档站点的设计至关重要
。
通常组件库文档站点的设计中，文档站点可根据不同组件
(
如轮播图组件
)
在浏览器指定区域实时预览其示例在移动端
H5
的渲染效果和操作交互
。
这样，在浏览器指定区域实时渲染预览移动端
H5
应用，模拟移动端
H5
应用的操作交互
、
预览其效果同样也是其重要功能组成部分
。
[0005]依据上述类型系统的架构设计方案，在浏览器指定区域模拟移动端人机操作交互的方法和装置极其存在必要性
。
[0006]目前，电脑终端浏览器如果想依赖浏览器模拟触摸事件需要打开开发者工具，
Chrome
浏览器还需要开启响应式调试模式，
Firebox
浏览器不仅需要开启响应式模式，还需要开启触摸模式
。
这种操作模式在实际应用场景下，给用户带来了一定的操作复杂性，对于非计算机行业研发人员更是难以理解
。
而且，在实际应用操作场景下，无代码开发平台和移动端
H5
组件库文档站点让用户打开开发者模式进行调试是非常不人性化和极差用户体验的
。
用户需要在非响应式模式下来访问应用系统
。
[0007]另外，在非响应式模式下，浏览器目前仅支持鼠标事件，不支持人手触摸滑动事件，更不支持浏览器指定区域触摸滑动事件
。
这对于在浏览器指定区域内实时预览
H5
应用，模拟
H5
应用的操作交互带来了一定技术障碍
。
[0008]因此，需要一种新的方法和装置来处理浏览器指定区域模拟手机触摸滑动事件
。
以便更好的简化用户操作难度，提升用户操作体验
。

技术实现思路

[0009]本专利技术提供了一种基于浏览器鼠标事件，在电脑浏览器指定区域内模拟手机触摸事件的方法和装置来满足实际应用场景，解决操作交互遇到的技术障碍
。
[0010]为了实现上述目的，本专利技术采用以下技术方案：
[0011]本专利技术一方面提出一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法，包括：
[0012]步骤1，自定义触摸事件；包括：创建自定义事件，并将自定义事件名称赋值给自定义触摸事件，把鼠标事件的属性赋值给自定义触摸事件，根据鼠标事件获取活动状态的触摸点，根据鼠标事件创建触摸点列表，并派发自定义触摸事件；
[0013]步骤2，初始化触摸事件，指定浏览器上模拟手机滑动事件生效区域；
[0014]步骤3，监听鼠标事件；
[0015]步骤4，根据鼠标事件判定是否触发自定义触摸事件
。
[0016]进一步地，所述自定义事件包括开始触摸事件
、
触摸移动事件
、
触摸结束事件
。
[0017]进一步地，所述鼠标事件包括鼠标按下事件
、
鼠标移动事件
、
鼠标松起事件
。
[0018]进一步地，所述鼠标事件的属性包括
Alt
键是否被按下并保持住
、Ctrl
键是否被按下并保持住
、Meta
键是否被按下并保持住
、Shift
键是否被按下并保持住
。
[0019]进一步地，所述根据鼠标事件获取活动状态的触摸点，根据鼠标事件创建触摸点列表包括：
[0020]首先判定鼠标事件类型，如果是鼠标松起事件，则返回空的触摸点，否则根据鼠标事件，创建触摸点列表
。
[0021]进一步地，所述根据鼠标事件创建触摸点列表包括：
[0022]根据鼠标距离浏览器内容区域左上角水平偏移量
、
鼠标距离浏览器内容区域左上角垂直偏移量
、
鼠标距离屏幕窗口左上角水平偏移量
、
鼠标距离屏幕窗口左上角垂直偏移量
、
鼠标距离浏览器内容窗口左上角水平偏移量
、
鼠标距离浏览器内容窗口左上角垂直偏移量
、
事件触发元素，所述事件触发元素保存有浏览器上模拟手机滑动事件生效区域坐标范围，得到鼠标的实时位置坐标，如果其位于上述坐标范围内，则将其作为触摸点，保存实时触摸点坐标，进而得到触摸点列表
。
[0023]进一步地，所述步骤2包括：
[0024]首先判定窗口里是否包含开始触摸事件，如果不包含，则判定为当前页面不支持触摸事件，需要模拟手机触摸事件，然后将浏览器指定区域坐标范围保存在事件触发元素中，以使模拟手机触摸滑动事件在浏览器指定区域生效
。
[0025]进一步地，所述步骤3包括：
[0026]在浏览器指定区域绑定需要监听的鼠标事件，将鼠标按下事件绑定为开始触摸事件，鼠标移动事件绑定为触摸移动事件，鼠标松起事件绑定为触摸结束事件，并设置触摸偏移量
。
[0027]进一步地，所述步骤4包括：
[0028]当鼠标按下事件触发，则开启触摸事件；鼠标松起事件触发，则停止触摸事件；如果鼠标拖动，鼠标移动事件触发的同时且不允许执行触摸事件，则终止触摸事件；当鼠标第一次按下，且事件触发元素不存在或事件触发元素没有绑定派发的自定义触摸事件，则把鼠标事件元素赋给自定义触摸事件元素，然后执行自定义触摸事件，如果鼠标松起，触摸事件元素重置为空
。
[0029]本专利技术另一方面提出一种鼠标在电脑浏览本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法，其特征在于，包括：步骤1，自定义触摸事件；包括：创建自定义事件，并将自定义事件名称赋值给自定义触摸事件，把鼠标事件的属性赋值给自定义触摸事件，根据鼠标事件获取活动状态的触摸点，根据鼠标事件创建触摸点列表，并派发自定义触摸事件；步骤2，初始化触摸事件，指定浏览器上模拟手机滑动事件生效区域；步骤3，监听鼠标事件；步骤4，根据鼠标事件判定是否触发自定义触摸事件
。2.
根据权利要求1所述的一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法，其特征在于，所述自定义事件包括开始触摸事件
、
触摸移动事件
、
触摸结束事件
。3.
根据权利要求1所述的一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法，其特征在于，所述鼠标事件包括鼠标按下事件
、
鼠标移动事件
、
鼠标松起事件
。4.
根据权利要求3所述的一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法，其特征在于，所述鼠标事件的属性包括
Alt
键是否被按下并保持住
、Ctrl
键是否被按下并保持住
、Meta
键是否被按下并保持住
、Shift
键是否被按下并保持住
。5.
根据权利要求3所述的一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法，其特征在于，所述根据鼠标事件获取活动状态的触摸点，根据鼠标事件创建触摸点列表包括：首先判定鼠标事件类型，如果是鼠标松起事件，则返回空的触摸点，否则根据鼠标事件，创建触摸点列表
。6.
根据权利要求1所述的一种鼠标在电脑浏览器指定区域模拟手机触摸滑动事件的方法，其特征在于，所述根据鼠标事件创建触摸点列表包括：根据鼠标距离浏览器内容区域左上角水平偏移量
、
鼠标距离浏览器内容区域左上角垂直偏移量
、
鼠标距离屏幕窗口左上角水平偏移量
、
鼠标距离屏幕窗口左上角垂直偏移量
、...

【专利技术属性】
技术研发人员：皮帅帅，
申请(专利权)人：数字郑州科技有限公司，
类型：发明
国别省市：