The principle of Touch component

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The realization of Touch component mainly solves the PC terminal and the mobile terminal drag elements function.

PC terminal:

Relying on the event: MouseDown, MouseMove, mouseup mouse events.


The current element position information recorded 1 MouseDown events, to bind the elements MouseMove, mouseup event.

2 MouseMove function, gets the current mouse when moving elements to change the location of the element position attribute. One can calculate the access to mobile x, Y directions of the maximum value, which provided a range of movement to the element.

The main treatment to cancel the event binding operation of 3 mouseup events.

The mobile terminal:

Relying on the event: touchstart, touchmove, touchend, touchcancel event


Save the current location information of the 1 elements in the touchstart event, touchend touchmove, touchcancel to bind the elements, events. In the event that functions plus the code event.preventDefault () to prevent the default action &mdash touch event; — rolling screen, because do not want to let the screen move.

2 touchmove function, the fingers touch screen from the changedTouches array in the mobile element position, then change the position information elements. You can also set a range of motion control of mobile elements.

In touchend 3, to cancel event binding in touchcancel. The difference between touchend and touchcancel is that, touchcancel system controls affect touch function, such as suddenly pop up a dialog box, it triggers the touchcancel event. The touchend event is triggered by normal users move finger after the event.

Some knowledge about the touch event following supplement:

The Touch event flow:

Touchstart touch to start (fingers on the touch screen)

Touchmove drag (moving the fingers on the touch screen)

Touchend touch end (fingers from the touch screen.)

touchcancel, In the drag interrupt triggering.

Three Touch list:

1. touches : A list of all fingers currently on the screen.

2. targetTouches : A list in the current DOM elements on a finger.

3. changedTouches : A list of current events involving the fingers.

Maybe you have a question, why not use mobile terminal in MouseDown, MouseMove, mouseup events.?

The mobile client also supports mouse events. So to do a test, in the mobile terminal on an element binding to mouse event, touch event, click event, click or mobile observation event response situation, found:

The response from the 1 three class event to slow the order: touch > mouse > click event; event;.

2 touchmove event is triggered, mouse and click events will not trigger.

3 bind to the click event, slightly moving elements of the operation, the click event is not triggered.

From the above test results can be found:

The mobile client is to support mouse, click events, but the best time in the mobile terminal or bind to the touch event. This is a special processing client for mobile environment.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by King at November 18, 2013 - 2:08 PM