throttleでのCANVASの間引き処理

前提・実現したいこと

CANVAS APIを利用した学習を行っております。
クリックした後にすぐ次のオブジェクトを出さずに、3秒間クリックしても反応しないようすることを実装しようと
したところ、下記エラーが出力されてオブジェクト自体が反映されない状態です。
(3秒ごとにエラーが出るので、挙動的に間引き処理自体は出来ている様子)

lodashは使わない方向で考えています。
ご助力頂けますと幸いです。よろしくお願いします。

発生している問題・エラーメッセージ

エラーメッセージ
ファイル名.html:220 Uncaught TypeError: Cannot read property 'clientX' of undefined
    at onClick (ファイル名.html:220)
    at HTMLCanvasElement.<anonymous> (ファイル名.html:213)
onClick @ ファイル名.html:220
(anonymous) @ ファイル名.html:213

該当のソースコード

Javascript
1let blockP = document.getElementById('view_1');
2
3      let throttle = function (th, interval){
4        let lastTime = Date.now() - interval
5        return function(){
6          if((lastTime + interval) < Date.now()){
7            lastTime = Date.now()
8            th()
9          }
10        }
11      }
12
13      function onClick(e) { //出現させるブロックの位置、大きさ、落ちる速度
14        let width = height = Math.floor(Math.random() * 80 + 30); 
15        let x = e.clientX - blockP.offsetLeft - width / 2;
16        let y = 10; 
17        let gravity = 5;
18        let boxColor = colors[Math.floor(Math.random() * colors.length)];
19        
20        shapes.push(new Shape(x, y, width, height, gravity, boxColor));
21      }
22      
23      let boxClick = throttle(onClick, 3000);
24      blockP.addEventListener('click', boxClick, false);
25      /*ここまで*/
26

行動規範の内容に同意します

回答1件

ベストアンサー

ごめんなさい。
onClick(e)のeに何が入ってきてほしいと思っているのかが分からないため回答は示せません。
現在エラーになっている理由だけお伝えします。

javascript
1let blockP = document.getElementById('view_1');
2
3      let throttle = function (th, interval){
4        let lastTime = Date.now() - interval
5        return function(){
6          if((lastTime + interval) < Date.now()){
7            lastTime = Date.now()
8            // ポイント1
9            th()
10          }
11        }
12      }
13
14      function onClick(e) { //出現させるブロックの位置、大きさ、落ちる速度
15        let width = height = Math.floor(Math.random() * 80 + 30); 
16        // ポイント2
17        let x = e.clientX - blockP.offsetLeft - width / 2;
18        let y = 10; 
19        let gravity = 5;
20        let boxColor = colors[Math.floor(Math.random() * colors.length)];
21
22        shapes.push(new Shape(x, y, width, height, gravity, boxColor));
23      }
24
25      // ポイント3
26      let boxClick = throttle(onClick, 3000);
27      // ポイント4
28      blockP.addEventListener('click', boxClick, false);
29      /*ここまで*/