プラグインを使わずにフリックイベントを実装したい

Javascript でマウスまたはタッチでのフリックを判定したいと考えています。
押したときと離したときの距離だけではゆっくりと移動させたときでもフリック扱いになってしまうため、移動量とフリック速度の両方で判定しようと思い次のようにしました。

ドラッグするごとに位置を最新の３回まで記録し、離したときにその３回の移動量をもとに判断できると考えました。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8</head>
9<body>
10    <div id="flick" style="width: 240px; height: 240px; background: #ddd;"></div>
11
12    <script>
13        document.addEventListener('DOMContentLoaded', function(){
14            var mouseDown = false;
15
16            var area = document.querySelector('#flick');
17            var position = null;
18            var timer = null;
19            var log = [];
20
21            area.addEventListener('mousedown', function(event){
22                mouseDown = true;
23                position = {
24                    x: event.clientX - area.offsetLeft,
25                    y: event.clientY - area.offsetTop
26                };
27            });
28
29            document.addEventListener('mouseup', function(){
30                mouseDown = false;
31
32                if(log.length == 0) return;
33                
34                var prev = log[0];
35                var moveX = 0;
36                var moveY = 0;
37                for(var i = 1; i < log.length; i++){
38                    moveX += log[i].x - prev.x;
39                    moveY += log[i].y - prev.y;
40                }
41
42                var threshold = 25;
43
44                if(Math.abs(moveX) > threshold || Math.abs(moveY) > threshold) {
45                    if(Math.abs(moveX) > Math.abs(moveY)) {
46                        if(moveX >= 0) {
47                            area.innerHTML = 'right';
48                        } else {
49                            area.innerHTML = 'left';
50                        }
51                    } else {
52                        if(moveY >= 0) {
53                            area.innerHTML = 'down';
54                        } else {
55                            area.innerHTML = 'up';
56                        }
57                    }
58                } else {
59                    area.innerHTML = '';
60                }
61            });
62
63            document.addEventListener('mousemove', function(event){
64                if(mouseDown !== true) return;
65                var x = event.clientX - area.offsetLeft;
66                var y = event.clientY - area.offsetTop;
67                logPosition(x, y);
68            });
69
70            function logPosition(x, y){
71                log.push({x: x, y: y});
72                if(log.length > 3) log.shift();
73            }
74        });
75    </script>
76</body>
77</html>