【jQuery】フリックの実装でなぜ自分が書いたコードが「Uncaught TypeError」と表示されるのかを知りたいです。

Qiitaの記事を参考にしてフリックを実装してブラウザで動作を確認してみたら「Uncaught TypeError: Cannot read property 'originalEvent' of undefined」という風に表示されました。（１枚目の画像を左にフリックしたときにエラーが出ました）
なぜUncaught TypeErrorが表示されるのかを教えていただきたいです。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<div class="swipe-photo">
14    <ul class="swipe-photo-container clearfix">
15        <li class="swipe-photo-item"><img src="img/0.jpg" class="swipe-photo-thumbnail"></li>
16        <li class="swipe-photo-item"><img src="img/1.jpg" class="swipe-photo-thumbnail"></li>
17        <li class="swipe-photo-item"><img src="img/2.jpg" class="swipe-photo-thumbnail"></li>
18        <li class="swipe-photo-item"><img src="img/3.jpg" class="swipe-photo-thumbnail"></li>
19        <li class="swipe-photo-item"><img src="img/4.jpg" class="swipe-photo-thumbnail"></li>
20        <li class="swipe-photo-item"><img src="img/5.jpg" class="swipe-photo-thumbnail"></li>
21    </ul>
22</div>
23<script type="text/javascript" src="js/jquery.js"></script>
24<script type="text/javascript">
25$(function(){
26  var flickStart, flickMove, flickEnd;
27
28  $(".swipe-photo-item").on({
29    "touchstart": function(){
30      flickStart();
31    },
32    "touchmove": function(){
33      flickMove();
34    },
35    "touchend": function(){
36      flickEnd();
37    }
38  });
39
40  (function(){
41    var slideWidth = $('.swipe-photo-item').outerWidth(); // .swipe-photo-itemの幅を取得して代入
42    var slideNum = $('.swipe-photo-item').length; // .swipe-photo-itemの数を取得して代入
43    var slideSetWidth = slideWidth * slideNum; // .swipe-photo-itemの幅×数で求めた値を代入
44    var slideCurrent = 0; // 現在地を示す変数
45    var direction, position;
46
47    $('.swipe-photo-container').css('width', slideSetWidth); // .swipe-photo-containerのスタイルシートにwidth: 上の変数を指定
48
49    // アニメーションを実行する即時変数
50    var sliding = function sliding(){
51      // slideCurrentが0以下の場合
52      if(slideCurrent<0){
53        slideCurrent = slideNum - 1;
54
55      // slideCurrentがslideNumを超えたら
56      }else if(slideCurrent > slideNum - 1){
57        slideCurrent = 0;
58      }
59      $('.swipe-photo-container').animate({
60        left: slideCurrent * -slideWidth
61      });
62    }
63
64    // タッチイベントの処理内容
65    flickStart = function flickStart(event){
66      position = getPosition(event);
67      direction = ''; //  一度リセットする
68    }
69
70    flickMove = function flickMove(event){
71      if(position - getPosition(event) > 1){
72        direction = 'left';
73      }else if(position - getPosition(event) < 1){
74        direction = 'right';
75      }
76    }
77
78    flickEnd = function flickEnd(event){
79      if(direction=='right'){
80        slideCurrent--;
81        sliding();
82      }else if(direction=='left'){
83        slideCurrent++;
84        sliding();
85      }
86    }
87
88    // 横方向の座標を取得
89    function getPosition(event){
90      return event.originalEvent.changedTouches[0].pageX;
91    }
92  })();
93});
94</script>
95</body>
96</html>

css
1.swipe-photo {
2    position: relative;
3    width: 320px;
4    height: 240px;
5    margin: 0 auto;
6    overflow: hidden;
7}
8.swipe-photo-container {
9    position: absolute;
10    top: 0;
11    left: 0;
12}
13.swipe-photo-item {
14    float: left;
15}
16.swipe-photo-thumbnail {
17    width: 320px;
18    height: 240px;
19}

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

回答2件

flickStart();と引数無しで呼び出している箇所がありますが、このflickStart(event)関数からは getPosition(event)を呼び出しています。

もともとの呼び出しが引数なしだったので、getPosition内でのeventがundefinedとなってしまっています。

投稿2019/12/11 02:09

maisumakun

総合スコア145975

退会済みユーザー

2019/12/11 02:20

回答ありがとうございます。私が書いたコードをどう修正すれば良いかを教えていただきたいです。

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

ベストアンサー

jQuery Event から DOM Event を取る

jquery
1function getPosition(event){
2　　　 // この↓ eventが正しく取得できてないから
3      return event.originalEvent.changedTouches[0].pageX;
4}

あなたのコード

jquery
1$(".swipe-photo-item").on({
2    // イベント渡してないですよ？
3    "touchstart": function(){
4      flickStart();
5    },
6    "touchmove": function(){
7      flickMove();
8    },
9    "touchend": function(){
10      flickEnd();
11    }
12});

動く方のコード

jquery
1j.on({
2   touchstart:function(i){
3        d.thisX=parseInt($(".swipe-photo-container").css("left"));
4        // i が originalEvent.changedTouches[0] 持ってる
5        d.startX=i.originalEvent.changedTouches[0].pageX-d.thisX
6   },

投稿2019/12/11 02:17

azuapricot

総合スコア2341

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

【jQuery】フリックの実装でなぜ自分が書いたコードが「Uncaught TypeError」と表示されるのかを知りたいです。

関連した質問