阅读说明：本技术 一种基于web的同屏多人交互方法 (WEB-based one-screen multi-person interaction method ) 是由 周斌 于 2019-08-20 设计创作，主要内容包括：本发明提出了一种基于WEB的同屏多人交互方法,当用户的手指在触控屏上滑动或点击时,会产生一个事件,这个事件下传到目标节点,并在目标节点触发这个事件,为了使这个触发的这个事件只发生在本区域,不传递到其他区域,通过event.stopPropagation()或event.preventDefault()方法阻止触摸事件的冒泡传递,使得触控屏只响应目标元素上的信息；本发明的方法可以将一块屏幕按分辨率划分多个区域,每个区域的触摸事件不会跨度到另一区域,实现多人同屏操作时,互不干扰。(The invention provides a WEB-based one-screen multi-person interaction method, which is characterized in that when a finger of a user slides or clicks on a touch screen, an event is generated and is downloaded to a target node, the event is triggered at the target node, and in order to enable the triggered event to only occur in the region and not to be transmitted to other regions, bubble transmission of the touch event is prevented through an event. The method can divide a screen into a plurality of areas according to the resolution, and the touch event of each area cannot span to another area, so that mutual interference is avoided when multiple persons operate on the same screen.)

1. a WEB-based one-screen multi-person interaction method is characterized in that: the method comprises the following steps:

S1, dividing the touch screen into a plurality of areas according to resolution, and recording the coordinates of each pixel in each area on the touch screen;

S2, monitoring a touch event of an element on the touch screen, generating an event object when the touch event occurs, acquiring the event object, and determining the area where the touch event occurs;

S3, preventing bubble transmission of the touch event in the area where the touch event occurs;

And S4, responding to the touch event in the background.

2. the WEB-based on-screen multi-person interaction method of claim 1, wherein: the touch screen supports multi-point touch.

3. The WEB-based on-screen multi-person interaction method of claim 1, wherein: the touch event in S2 includes a point touch and a slide touch.

4. the WEB-based on-screen multi-person interaction method of claim 3, wherein: the event object in S2 includes the abscissa and ordinate of the trigger event, which are denoted as (x, y).

5. the WEB-based on-screen multi-person interaction method of claim 4, wherein: the S2 further includes the steps of:

S201, monitoring a touch event through js, and binding the touch event through addEventListener ();

s202, when a touch event occurs, capturing the touch event, finding a target, and entering a bubbling stage;

S203, capturing horizontal and vertical coordinates (x, y) of the trigger event in a capturing stage, and determining a target point of the trigger event according to the coordinates.

6. the WEB-based on-screen multi-person interaction method of claim 5, wherein: the bubble delivery of the touch event is prevented in S3 by the event.

Technical Field

the invention relates to the technical field of multi-person interaction, in particular to a WEB-based one-screen multi-person interaction method.

Background

currently, with the rise of html5, web development has been carried in various product forms, and plays an increasingly extensive technical support role, wherein the application of web technology on touch screen devices greatly simplifies the development difficulty and workload of applications, and increases the development flexibility. However, most of the existing web applications are operated and used for a single user, the application interaction form is limited, and only one user can operate the web applications at the same time, when a plurality of people operate simultaneously, the touch screen may understand the simultaneous operation of the plurality of people as the operation of a single person with two fingers, or the information of the operation of the touch screen is transmitted to another screen, so that the phenomenon of response error of the touch screen often occurs easily, and the use experience of the application is reduced. Therefore, in order to solve the above problems, the present invention provides a WEB-based method for multi-user interaction on the same screen, which realizes that the operation information on the touch screen only responds in the area of the touch screen, and is not transmitted to another screen, thereby realizing multi-user operation on the same screen without mutual interference.

Disclosure of Invention

In view of this, the invention provides a WEB-based one-screen multi-user interaction method, which realizes that operation information on a touch screen only responds in the region of the touch screen and cannot be transmitted to another screen, and realizes multi-user one-screen operation without mutual interference.

the technical scheme of the invention is realized as follows: the invention provides a WEB-based one-screen multi-person interaction method, which comprises the following steps:

S1, dividing the touch screen into a plurality of areas according to resolution, and recording the coordinates of each pixel in each area on the touch screen;

s2, monitoring a touch event of an element on the touch screen, generating an event object when the touch event occurs, acquiring the event object, and determining the area where the touch event occurs;

S3, preventing bubble transmission of the touch event in the area where the touch event occurs;

And S4, responding to the touch event in the background.

On the basis of the above technical solution, preferably, the touch screen supports multi-point touch.

On the basis of the above technical solution, it is preferable that the touch event in S2 includes a point touch and a sliding touch.

It is further preferable that the event object in S2 includes the abscissa and ordinate of the trigger event, which are denoted as (x, y).

Further preferably, S2 further includes the steps of:

S201, monitoring a touch event through js, and binding the touch event through addEventListener ();

s202, when a touch event occurs, capturing the touch event, finding a target, and entering a bubbling stage;

s203, capturing horizontal and vertical coordinates (x, y) of the trigger event in a capturing stage, and determining a target point of the trigger event according to the coordinates.

it is further preferable that bubble delivery of the touch event is prevented by the event.stopprogress () or event.preventdefault () method in S3.

compared with the prior art, the WEB-based one-screen multi-person interaction method has the following beneficial effects:

(1) The webpage is converted into a JavaScript object by using the DOM model, so that various operations can be carried out by using the script, the browser can analyze the structured document into a series of nodes according to the DOM model, then the nodes form a tree-shaped structure, and all the nodes and the final tree-shaped structure have standard external interfaces;

(2) When a finger of a user slides or clicks on the touch screen, an event is generated, the event is downloaded to a target node and is triggered at the target node, and in order to enable the triggered event to only occur in the local area and not to be transmitted to other areas, bubble transmission of the touch event is prevented through an event.

(3) The method can divide a screen into a plurality of areas according to the resolution, and the touch event of each area cannot span to another area, so that mutual interference is avoided when multiple persons operate on the same screen.

Drawings

in order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

FIG. 1 is a flow chart of a WEB-based one-screen multi-person interaction method of the present invention;

FIG. 2 is a flow chart of monitoring in a WEB-based one-screen multi-person interaction method of the present invention;

FIG. 3 is a DOM tree structure diagram in the WEB-based one-screen multi-person interaction method of the present invention;

FIG. 4 is a schematic diagram of a DOM event stream in the WEB-based on-screen multi-person interaction method of the present invention.

Detailed Description

the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be obtained by a person skilled in the art without any inventive step based on the embodiments of the present invention, are within the scope of the present invention.

as shown in fig. 1, the WEB-based one-screen multi-person interaction method of the present invention includes the following steps:

s1, dividing the touch screen into a plurality of areas according to resolution, and recording the coordinates of each pixel in each area on the touch screen;

S2, monitoring a touch event of an element on the touch screen, generating an event object when the touch event occurs, acquiring the event object, and determining the area where the touch event occurs;

s3, preventing bubble transmission of the touch event in the area where the touch event occurs;

And S4, responding to the touch event in the background.

the touch screen selected by the embodiment supports multi-point touch, a webpage launched on the touch screen is a dynamic webpage, when the dynamic webpage is used, a DOM (Document Object Model) is required to be used, the DOM is named Document Object Model, the Document Object Model allows a script (js) to control the Web page, the window and the Document, and the DOM tree structure is shown in FIG. 3. All HTML elements, i.e., web pages, are accessible through the DOM, along with the text and attributes they contain, and the content therein can be modified and deleted, while new elements can also be created. In the embodiment, the touch screen is divided into 3 areas, so that 3 persons can operate the touch screen at the same time.

in the embodiment, because the dynamic webpage is used, js is required to be used for monitoring the touch event, is called JavaScript in a whole way, and has the main effects of separating JavaScript codes from HTML tags, enabling a document structure to be clear and facilitating management and development. The order in which events are received in a page, i.e. when an event occurs, the process of propagating the event is called an event stream. In this embodiment, a DOM event stream is used that includes an event capture phase, a target phase, and an event bubble phase.

Further preferably, as shown in fig. 2, S2 further includes the following steps:

s201, monitoring a touch event through js, and binding the touch event through addEventListener ();

S202, when a touch event occurs, capturing the touch event, finding a target, and entering a bubbling stage;

s203, capturing horizontal and vertical coordinates (x, y) of the trigger event in a capturing stage, and determining a target node where the trigger event occurs according to the coordinates.

In the present embodiment, an event handling function of a touch event is defined, and the event is bound by addEventListener (). The touch events include a point touch and a slide touch. After each touch event is triggered, an event object is generated, wherein the event object additionally comprises three touch lists, namely touch, targettouch and changedTouches, and the touch represents a list of all fingers on the current screen; targetTouches represents a list of fingers on the current dom element; changedTouches represent a list of fingers that are related to the current event. Each touch in these lists consists of touch objects, which contain touch information, with the following main attributes: the clientX/clientY is the position of the touch point relative to the browser window; pageX/pageY is the position of the touch point relative to the page; screen X/screen Y: the position of the touch point relative to the screen; identifier is ID of touch object; target is the current DOM element. When a touch event occurs, the coordinates of pageX/pageY are recorded as (x, y), and since the coordinates of each element in each area on the touch screen are recorded in step S203, the area where the touch event occurs can be determined by the coordinates.

in this embodiment, the DOM event stream trigger sequence is capture first and then bubble. As shown in FIG. 3, when some operation occurs at a node of the DOM tree, such as clicking and mouse moving, an event is transmitted, and the event is sent from Window and continuously passes through lower nodes until a triggered target node. The process before reaching the target node is the acquisition phase and all nodes passing by will trigger this event. The task of the capture phase is to establish this event delivery route so that the following bubbling phase follows this route back to Window. When the event is continuously transmitted to the target node, the event is finally triggered on the target node, namely the target phase. When the event starts, the process of gradually propagating the event from the node where the event occurs to the Window is an bubbling stage. As shown in FIG. 4, when there is an A event on the document, there is a B event on the div, there is a C event on the span inside the div, if there is no blocking event bubble added to span and div, the B event of div and the A event of document will be triggered when the span is clicked, and the blocking event bubble is added to the event that does not want to trigger div and document when the span is clicked, and the same reason is true for the div. The bubble transmission is embodied on the screen, that is, when a certain position in a certain area on the touch screen is clicked, an event on a certain point in another area on the touch screen is triggered, and the operation of the area is interfered. When a finger of a user slides or clicks on the touch screen, an event is generated, the event is downloaded to a target node, the event is triggered at the target node, and in order to enable the triggered event to only occur in the local area and not to be transmitted to other areas, bubble transmission of the touch event is prevented through an event.

the above description is only for the purpose of illustrating the preferred embodiments of the present invention and is not to be construed as limiting the invention, and any modifications, equivalents, improvements and the like that fall within the spirit and principle of the present invention are intended to be included therein.