CN110568988A - 一种基于web的同屏多人交互方法 - Google Patents

Abstract

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

Description

一种基于WEB的同屏多人交互方法

技术领域

本发明涉及多人交互技术领域，尤其涉及一种基于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模型，将结构化文档解析成一系列的节点，再由这些节点组成一个树状结构，所有的节点和最终的树状结构，都有规范的对外接口；

(2)当用户的手指在触控屏上滑动或点击时，会产生一个事件，这个事件下传到目标节点，并在目标节点触发这个事件，为了使这个触发的这个事件只发生在本区域，不传递到其他区域，通过event.stopPropagation()或event.preventDefault()方法阻止触摸事件的冒泡传递，使得触控屏只响应目标元素上的信息；

(3)本发明的方法可以将一块屏幕按分辨率划分多个区域，每个区域的触摸事件不会跨度到另一区域，实现多人同屏操作时，互不干扰。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一种基于WEB的同屏多人交互方法的流程图；

图2为本发明一种基于WEB的同屏多人交互方法中监听的流程图；

图3为本发明一种基于WEB的同屏多人交互方法中DOM树结构图；

图4为本发明一种基于WEB的同屏多人交互方法中DOM事件流的示意图。

具体实施方式

下面将结合本发明实施方式，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式仅仅是本发明一部分实施方式，而不是全部的实施方式。基于本发明中的实施方式，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。

如图1所示，本发明的一种基于WEB的同屏多人交互方法，包括以下步骤：

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

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

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

S4、后台响应触摸事件。

本实施例选用的触控屏支持多点触控，投放在触控屏上网页为动态网页，使用动态网页时，必须使用DOM，DOM全称Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档，DOM树结构如图3所示。通过DOM可以访问所有的HTML元素，即网页页面，连同它们所包含的文本和属性，并且可以对其中的内容进行修改和删除，同时也可以创建新的元素。本实施例将触控屏分为3个区域，可以供3个人同时操作。

本实施例中，由于使用的是动态网页，因此，必须使用js监听触摸事件，js全称是JavaScript，主要作用是使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。页面中接收事件的顺序，即当一个事件发生时，该事件的传播过程便叫做事件流。本实施例中，使用了DOM事件流，其包括事件捕获阶段、目标阶段和事件冒泡阶段。

进一步优选的，如图2所示，S2还包括以下步骤：

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

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

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

在本实施例中，定义触摸事件的事件处理函数，并通过addEventListener()绑定事件。触摸事件包括点触摸和滑动触摸。每个触摸事件被触发后，会生成一个event对象，event对象里额外包括三个触摸列表，分别是touches、targetTouches和changedTouches，其中touches表示当前屏幕上所有手指的列表；targetTouches表示当前dom元素上手指的列表；changedTouches表示涉及当前事件的手指的列表。这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：clientX/clientY:触摸点相对浏览器窗口的位置；pageX/pageY:触摸点相对于页面的位置；screenX/screenY：触摸点相对于屏幕的位置；identifier:touch对象的ID；target:当前的DOM元素。当触摸事件发生时，记下其pageX/pageY的坐标，记为(x,y)，由于步骤S203已经记录下触控屏上每个区域中每个元素的坐标，因此，可以通过坐标判断触摸事件发生的区域。

由于本实施例中，DOM事件流触发顺序是先捕获后冒泡。如图3所示，当我们在DOM树的某个节点发生了一些操作，例如单击、鼠标移动，就会发射一个事件，这个事件从Window发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段，并且所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回Window。当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。事件开始时，由事件发生所在的节点逐级传播到Window的过程为冒泡阶段。如图4所示，当document上有A事件，div有B事件，div里面的span有C事件，如果不给span和div加阻止事件冒泡的话，点击span时就会触发到div的B事件、document的A事件，当点击span时不想触发div和document的事件就要加上阻止事件冒泡，div也是一样的道理。冒泡传递体现在屏幕上就是，点击触控屏上某一区域内某处时，会触发触控屏上另一区域某点上的事件，进行干扰该区域的操作。当用户的手指在触控屏上滑动或点击时，会产生一个事件，这个事件下传到目标节点，并在目标节点触发这个事件，为了使这个触发的这个事件只发生在本区域，不传递到其他区域，通过event.stopPropagation()或event.preventDefault()方法阻止触摸事件的冒泡传递，使得触控屏只响应目标元素上的信息。

以上所述仅为本发明的较佳实施方式而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (6)

1.一种基于WEB的同屏多人交互方法，其特征在于：包括以下步骤：

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

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

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

S4、后台响应触摸事件。

2.如权利要求1所述的一种基于WEB的同屏多人交互方法，其特征在于：所述触控屏支持多点触控。

3.如权利要求1所述的一种基于WEB的同屏多人交互方法，其特征在于：所述S2中触摸事件包括点触摸和滑动触摸。

4.如权利要求3所述的一种基于WEB的同屏多人交互方法，其特征在于：所述S2中事件对象包括触发事件的横纵坐标，记为(x,y)。

5.如权利要求4所述的一种基于WEB的同屏多人交互方法，其特征在于：所述S2还包括以下步骤：

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

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

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

6.如权利要求5所述的一种基于WEB的同屏多人交互方法，其特征在于：所述S3中通过event.stopPropagation()或event.preventDefault()方法阻止触摸事件的冒泡传递。