[发明专利]一种基于WEB的同屏多人交互方法

说明书

本发明提出了一种基于WEB的同屏多人交互方法，当用户的手指在触控屏上滑动或点击时，会产生一个事件，这个事件下传到目标节点，并在目标节点触发这个事件，为了使这个触发的这个事件只发生在本区域，不传递到其他区域，通过event.stopPropagation()或event.preventDefault()方法阻止触摸事件的冒泡传递，使得触控屏只响应目标元素上的信息；本发明的方法可以将一块屏幕按分辨率划分多个区域，每个区域的触摸事件不会跨度到另一区域，实现多人同屏操作时，互不干扰。

技术领域

本发明涉及多人交互技术领域，尤其涉及一种基于WEB的同屏多人交互方法。

背景技术

当前，随着html5的兴起，web开发已经承载于各种产品形态中，起到了越来越广泛的技术支持作用，其中web技术在触摸屏设备上的应用大大简化了应用的开发难度和工作量，增加了开发的灵活度。但是由于目前大部分的web应用都是面向单用户操作使用，在应用的交互形式上有所局限，只能同时供一人操作，当多个人同时操作时，触摸屏有可能将多人的同时操作理解为单人的双指操作，或者本屏操作的信息传递到另一块屏上，因此，经常容易出现触摸屏响应错误的现象，降低了应用的使用体验。因此，为解决上述问题，本发明提供一种基于WEB的同屏多人交互方法，实现触控屏上的操作信息只在本触控屏区域响应，不会传递到另一块屏，实现多人同屏操作，互不干扰。

发明内容

有鉴于此，本发明提出了一种基于WEB的同屏多人交互方法，实现触控屏上的操作信息只在本触控屏区域响应，不会传递到另一块屏，实现多人同屏操作，互不干扰。

本发明的技术方案是这样实现的：本发明提供了一种基于WEB的同屏多人交互方法，包括以下步骤：

S1、将触控屏按分辨率分为多个的区域，并记录触控屏上每个区域中每个像素的坐标；

S2、监听触控屏上元素的触摸事件，当发生触摸事件时，产生事件对象，获取事件对象，再确定触摸事件发生的区域；

S3、在触摸事件发生的区域内阻止触摸事件的冒泡传递；

S4、后台响应触摸事件。

在以上技术方案的基础上，优选的，触控屏支持多点触控。

在以上技术方案的基础上，优选的，S2中触摸事件包括点触摸和滑动触摸。

进一步优选的，S2中事件对象包括触发事件的横纵坐标，记为(x,y)。

进一步优选的，S2还包括以下步骤：

S201、通过js监听触摸事件，并通过addEventListener()绑定触摸事件；

S202、当触摸事件发生时，先捕获触摸事件，再找到目标，最后进入冒泡阶段；

S203、在捕获阶段捕获到触发事件的横纵坐标(x,y)，根据坐标确定触发事件发生的目标点。

进一步优选的，S3中通过event.stopPropagation()或event.preventDefault()方法阻止触摸事件的冒泡传递。

本发明的一种基于WEB的同屏多人交互方法相对于现有技术具有以下有益效果：

(1)通过使用DOM模型将网页转为一个JavaScript对象，从而可以用脚本进行各种操作，浏览器会根据DOM模型，将结构化文档解析成一系列的节点，再由这些节点组成一个树状结构，所有的节点和最终的树状结构，都有规范的对外接口；