Summary of js Implementation of Mac touchpad dual-finger events

Summary of js Implementation of Mac touchpad dual-finger events Preface

In the past few days, when fixing a web problem, you need to capture the Mac touchpad dual-finger event (top, bottom, left, right, zoom in, and zoom out), but found that there is no ready-made wheel, you still need to create it yourself.

For example, jquery. mousewheel. js (supports cross-browser mouse wheel adding) is too simple to handle Mac dual-finger behavior, so it cannot be used.

Target

Obtain the dual-finger behavior of the Mac touchpad. There are two specific actions: one is to drag the route in real time, and the other is the gesture (top, bottom, left, right, zoom in, zoom out ).

Difficulties

Dual-finger actions only trigger the mousewheel event. Other touch and mouse actions are not triggered.

Dual-finger features

1. In the fast sliding process, the positive and negative values of the initial deltaX and deltaY values are different from those of the sliding direction.

2. In the process of slow sliding, the value range of deltaX and deltaY is very small, generally in [-3, 3].

3. Within 1 s, the mousewheel event is triggered about 100 times.

4. jitter occurs during the sliding process.

Path)

Quick slide

1. The positive and negative values of deltaX and deltaY values are different from those of the moving direction. (Because it is not the real direction)

2. The deltaX and deltaY values triggered each time are subtracted from each other. If the result value is different from the direction, the result value is discarded.

3. The remaining difference value is the moving distance.

4. All the difference values in the two directions are added. There are two groups in total. If the group value is greater than the group value, positive and negative determine the direction.

For slow sliding

1. Because the value range of deltaX and deltaY is very small, they are all retaed, but the value and direction are different, they are also discarded.

2. All the difference values in the two directions are added. There are two groups in total. If the group value is greater than the group value, positive and negative determine the direction.

Gesture)

Based on the above, record the deltaX, deltaY, and the difference between the two:

DeltaX and deltaY are used to measure zoom-in and zoom-out gestures.

The difference between two is used to count the top, bottom, left, and right gestures.

Therefore, a gesture is a gesture for a period of time, not a moment.

Implementation Code

The specific code will not be posted. You can download it directly on my Github :#

Summary

Route problem: the deltaX and deltaY values provided by mousewheel are quite different from the operation results, and the fast sliding effect is particularly inaccurate.

Gesture problems: Due to the third point of the double finger feature, gesture implementation cannot be precise. Even if the time period is short, it will become more inaccurate because of the data volume problem (the idea of calculus cannot be used; longer time period, longer response time;

For more information about the specific effect, see the code. The effect is not satisfactory, but you can download the Code. If you have a better solution, please tell me and thank you.

The above is a summary of the Mac touchpad dual-finger events implemented by js. For more information, see other related articles in the first PHP community!