回答編集履歴

6

screenX, screenY, pageX, pageY に言及しました

2018/03/07 22:49

投稿

退会済みユーザー
test CHANGED
@@ -26,15 +26,15 @@
26
26
 
27
27
  > Uncaught TypeError: cannot read property 'clientX' of undefined 206行目
28
28
 
29
- clientXというプロパティは読めませんよ、と大雑把にはそういう意味なんでしょうが、
29
+ clientXというプロパティは読めませんよ、と大雑把にはそういう意味なんでしょうが、そもそもclientXはscreenX、screenY、pageX、pageYと同列のプロパティーなのでは?と混乱中です。
30
30
 
31
31
 
32
32
 
33
- 「**undefined の** 'clientX' は読めません」という意味です。したがって、問題は「clientX がない」ではなく「touches[0] がない(から touches[0].clientX もない)」です。
33
+ 「**undefined の** 'clientX' は読めません」という意味ですので、問題は「clientX がない」ではなく「touches[0] がない(から touches[0].clientX もない)」です。screenX, screenY, pageX, pageY も同列のプロパティですから、それらを使ったとしても、同じエラーになったでしょう。
34
34
 
35
35
 
36
36
 
37
- コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくいかないでしょう
37
+ コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくいきません
38
38
 
39
39
  event.touchesはそのイベントがおきたときに画面に触れている指の数だけ中身が入っています。
40
40
 
@@ -48,14 +48,10 @@
48
48
 
49
49
 
50
50
 
51
- そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こしたtouchが入っていますので、期待する動作をしてくれるでしょう
51
+ そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こしたtouchが入っています。
52
52
 
53
53
 
54
54
 
55
55
  [https://codepen.io/hoo-chan/full/bvbRWp/](https://codepen.io/hoo-chan/full/bvbRWp/)
56
56
 
57
57
  こちら↑に、touchイベントを見るためのアプリを作りました。指を離したときのtouchesとchangedTouchesの違いを確認してください。
58
-
59
-
60
-
61
- 問題が起こったときは、できるだけ分解して部品ごとに期待する動作をしているか確認するといいでしょう。

5

「タッチ」は使わないようにしました

2018/03/07 22:49

投稿

退会済みユーザー
test CHANGED
@@ -36,15 +36,15 @@
36
36
 
37
37
  コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくいかないでしょう。
38
38
 
39
- event.touchesはそのイベントがおきたときのタッチの数だけ中身が入っています。
39
+ event.touchesはそのイベントがおきたときに画面に触れている指の数だけ中身が入っています。
40
40
 
41
41
 
42
42
 
43
- - **touchstart** は指が画面に触れたときのイベントなので、touches[0]はあります。
43
+ - **touchstart** は指が画面に触れたときのイベントなので、touches[0] はあります。
44
44
 
45
- - **touchmove** は画面に触れた指が移動したときのイベントなので、touches[0]はあります。
45
+ - **touchmove** は画面に触れた指が移動したときのイベントなので、touches[0] はあります。
46
46
 
47
- - **touchend** は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。がって、getTouchPosでエラーになります。
47
+ - **touchend** は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。その、getTouchPosでエラーになります。
48
48
 
49
49
 
50
50
 

4

エラーの説明を追加しました

2018/03/07 22:30

投稿

退会済みユーザー
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- 「**undefined の** 'clientX' は読めません」という意味です。したがって、問題は「clientX がない」ではなく、「touches[0] がない」です。
33
+ 「**undefined の** 'clientX' は読めません」という意味です。したがって、問題は「clientX がない」ではなく、「touches[0] がない(から touches[0].clientX もない)」です。
34
34
 
35
35
 
36
36
 

3

同じ指を参照できるよう e.touches[0] || e.changedTouches[0] に変更しました

2018/03/07 22:25

投稿

退会済みユーザー
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  var rect = display.getBoundingClientRect();
10
10
 
11
- var touch = e.changedTouches[0];
11
+ var touch = e.touches[0] || e.changedTouches[0];
12
12
 
13
13
  return {
14
14
 

2

リストにしました

2018/03/07 22:24

投稿

退会済みユーザー
test CHANGED
@@ -38,11 +38,13 @@
38
38
 
39
39
  event.touchesはそのイベントがおきたときのタッチの数だけ中身が入っています。
40
40
 
41
- touchstart は指が画面に触れたときのイベントなので、touches[0]はあります。
42
41
 
43
- touchmove は画面に触れた指が移動したときのイベントなので、touches[0]はあります。
44
42
 
43
+ - **touchstart** は指が画面に触れたときのイベントなので、touches[0]はあります。
44
+
45
+ - **touchmove** は画面に触れた指が移動したときのイベントなので、touches[0]はあります。
46
+
45
- touchend は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。したがって、getTouchPosでエラーになります。
47
+ - **touchend** は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。したがって、getTouchPosでエラーになります。
46
48
 
47
49
 
48
50
 

1

脱字を修正しました

2018/03/07 22:17

投稿

退会済みユーザー
test CHANGED
@@ -36,23 +36,23 @@
36
36
 
37
37
  コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくいかないでしょう。
38
38
 
39
- event.touchesはそのイベントがおきたのタッチの数だけ中身が入っています。
39
+ event.touchesはそのイベントがおきたときのタッチの数だけ中身が入っています。
40
40
 
41
- touchstart は指が画面に触れたのイベントなので、touches[0]はあります。
41
+ touchstart は指が画面に触れたときのイベントなので、touches[0]はあります。
42
42
 
43
- touchmove は画面に触れた指が移動したのイベントなので、touches[0]はあります。
43
+ touchmove は画面に触れた指が移動したときのイベントなので、touches[0]はあります。
44
44
 
45
- touchend は指が画面から離れたときのイベントで、その指が画面に触れていた最後の指だった場合、touches は空になります。したがって、getTouchPosでエラーになります。
45
+ touchend は指が画面から離れたときのイベントで、そが画面に触れていた最後の指だった場合、touches は空になります。したがって、getTouchPosでエラーになります。
46
46
 
47
47
 
48
48
 
49
- そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こしたタッチが入っていますので、期待する動作をしてくれるでしょう。
49
+ そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こしたtouchが入っていますので、期待する動作をしてくれるでしょう。
50
50
 
51
51
 
52
52
 
53
53
  [https://codepen.io/hoo-chan/full/bvbRWp/](https://codepen.io/hoo-chan/full/bvbRWp/)
54
54
 
55
- こちら↑に、タッチイベントを見るためのアプリを作りました。指を離したときのtouchesとchangedTouchesの違いを確認してください。
55
+ こちら↑に、touchイベントを見るためのアプリを作りました。指を離したときのtouchesとchangedTouchesの違いを確認してください。
56
56
 
57
57
 
58
58