js implementation of Mac touchpad two-finger event summary

Preface

When fixing a web problem these days, I need to capture the Mac touchpad two-finger events (up, down, left, right, zoom in, zoom out), but I found that there is no ready-made wheel, so I still have to make it myself. .

For example: jquery.mousewheel.js (add cross-browser mouse wheel support), it is too simple and does not handle the Mac two-finger behavior, so it cannot be used.

Target

There are two specific ways to obtain the Mac touchpad two-finger behavior, one is real-time dragging route, and the other is gesture (up, down, left, right, zoom in, zoom out).

Difficulty

The two-finger action will only trigger the mousewheel event. Other touches and mouse events will not be triggered. You can only start with this.

Two-finger feature

1. During the rapid sliding process, the positive and negative values ​​of the initial values ​​of deltaX and deltaY are different from the sliding direction.

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

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

4. During the sliding process, the numerical value will have jitter problem.

Implement drag route idea (Path)

For quick swipes

1. The data whose initial positive and negative values ​​of deltaX and deltaY are different from the sliding direction must be discarded. (Because it is not the real direction)

2. The deltaX and deltaY values ​​of each trigger are subtracted from each other. If the result value is different from the direction, it is discarded.

3. The remaining difference is the direction movement distance.

4. All the differences in the two directions are added up, and there are two groups in total. Whichever group has the larger value is chosen. The positive or negative determines the direction.

For slow sliding

1. Since the value range of deltaX and deltaY values ​​is very small, they are both retained, but those with different values ​​and directions are also discarded.

2. All the differences in the two directions are added up, and there are two groups in total. Whichever group has the larger value is chosen. The positive or negative determines the direction.

Implement gesture ideas (Gesture)

Based on the above, record deltaX, deltaY and the pairwise difference within a period of time:

deltaX and deltaY are used to count zoom-in and zoom-out gestures.

The pairwise difference is used to count up, down, left and right hand gestures.

Therefore, a gesture is a gesture over a period of time, not a moment in time.

Implementation code

I won’t post the specific code, but you can download it directly from my Github: http://www.php.cn/

Summarize

Route problem: The deltaX and deltaY values ​​given by mousewheel are quite different from the operation effects, and the fast sliding effect is particularly inaccurate.

Gesture problem: Due to the third point of the two-finger characteristics, the gesture implementation cannot be accurate. Even if the time period is made very short, it will become less accurate due to the amount of data (the idea of ​​​​calculus cannot be used); As the segments become longer, the reaction time will also become longer;

You can download the code to see the specific effect. The effect is not satisfactory, but you can download it and have a look. If you have a better solution, please tell me, thank you.​

The above is the detailed content of js implementation of Mac touchpad two-finger event summary. For more information, please follow other related articles on the PHP Chinese website!