回答編集履歴
6
screenX, screenY, pageX, pageY に言及しました
answer
CHANGED
|
@@ -12,20 +12,18 @@
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
> Uncaught TypeError: cannot read property 'clientX' of undefined 206行目
|
|
15
|
-
clientXというプロパティは読めませんよ、と大雑把にはそういう意味なんでしょうが、
|
|
15
|
+
clientXというプロパティは読めませんよ、と大雑把にはそういう意味なんでしょうが、そもそもclientXはscreenX、screenY、pageX、pageYと同列のプロパティーなのでは？と混乱中です。
|
|
16
16
|
|
|
17
|
-
「**undefined の** 'clientX' は読めません」という意味です
|
|
17
|
+
「**undefined の** 'clientX' は読めません」という意味ですので、問題は「clientX がない」ではなく「touches[0] がない（から touches[0].clientX もない）」です。screenX, screenY, pageX, pageY も同列のプロパティですから、それらを使ったとしても、同じエラーになったでしょう。
|
|
18
18
|
|
|
19
|
-
コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくい
|
|
19
|
+
コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくいきません。
|
|
20
20
|
event.touchesはそのイベントがおきたときに画面に触れている指の数だけ中身が入っています。
|
|
21
21
|
|
|
22
22
|
- **touchstart** は指が画面に触れたときのイベントなので、touches[0] はあります。
|
|
23
23
|
- **touchmove** は画面に触れた指が移動したときのイベントなので、touches[0] はあります。
|
|
24
24
|
- **touchend** は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。そのため、getTouchPosでエラーになります。
|
|
25
25
|
|
|
26
|
-
そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こしたtouchが入っています
|
|
26
|
+
そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こしたtouchが入っています。
|
|
27
27
|
|
|
28
28
|
[https://codepen.io/hoo-chan/full/bvbRWp/](https://codepen.io/hoo-chan/full/bvbRWp/)
|
|
29
|
-
こちら↑に、touchイベントを見るためのアプリを作りました。指を離したときのtouchesとchangedTouchesの違いを確認してください。
|
|
29
|
+
こちら↑に、touchイベントを見るためのアプリを作りました。指を離したときのtouchesとchangedTouchesの違いを確認してください。
|
|
30
|
-
|
|
31
|
-
問題が起こったときは、できるだけ分解して部品ごとに期待する動作をしているか確認するといいでしょう。
|
5
「タッチ」は使わないようにしました
answer
CHANGED
|
@@ -17,11 +17,11 @@
|
|
|
17
17
|
「**undefined の** 'clientX' は読めません」という意味です。したがって、問題は「clientX がない」ではなく、「touches[0] がない（から touches[0].clientX もない）」です。
|
|
18
18
|
|
|
19
19
|
コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくいかないでしょう。
|
|
20
|
-
event.touchesはそのイベントがおきたときの
|
|
20
|
+
event.touchesはそのイベントがおきたときに画面に触れている指の数だけ中身が入っています。
|
|
21
21
|
|
|
22
|
-
- **touchstart** は指が画面に触れたときのイベントなので、touches[0]はあります。
|
|
22
|
+
- **touchstart** は指が画面に触れたときのイベントなので、touches[0] はあります。
|
|
23
|
-
- **touchmove** は画面に触れた指が移動したときのイベントなので、touches[0]はあります。
|
|
23
|
+
- **touchmove** は画面に触れた指が移動したときのイベントなので、touches[0] はあります。
|
|
24
|
-
- **touchend** は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。
|
|
24
|
+
- **touchend** は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。そのため、getTouchPosでエラーになります。
|
|
25
25
|
|
|
26
26
|
そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こしたtouchが入っていますので、期待する動作をしてくれるでしょう。
|
|
27
27
|
|
4
エラーの説明を追加しました
answer
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
> Uncaught TypeError: cannot read property 'clientX' of undefined 206行目
|
|
15
15
|
clientXというプロパティは読めませんよ、と大雑把にはそういう意味なんでしょうが、
|
|
16
16
|
|
|
17
|
-
「**undefined の** 'clientX' は読めません」という意味です。したがって、問題は「clientX がない」ではなく、「touches[0] がない」です。
|
|
17
|
+
「**undefined の** 'clientX' は読めません」という意味です。したがって、問題は「clientX がない」ではなく、「touches[0] がない（から touches[0].clientX もない）」です。
|
|
18
18
|
|
|
19
19
|
コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくいかないでしょう。
|
|
20
20
|
event.touchesはそのイベントがおきたときのタッチの数だけ中身が入っています。
|
3
同じ指を参照できるよう e.touches[0] || e.changedTouches[0] に変更しました
answer
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
```javascript
|
|
4
4
|
function getTouchPos(e) {
|
|
5
5
|
var rect = display.getBoundingClientRect();
|
|
6
|
-
var touch = e.changedTouches[0];
|
|
6
|
+
var touch = e.touches[0] || e.changedTouches[0];
|
|
7
7
|
return {
|
|
8
8
|
x : touch.clientX - rect.left,
|
|
9
9
|
y : touch.clientY - rect.top
|
2
リストにしました
answer
CHANGED
|
@@ -18,10 +18,11 @@
|
|
|
18
18
|
|
|
19
19
|
コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくいかないでしょう。
|
|
20
20
|
event.touchesはそのイベントがおきたときのタッチの数だけ中身が入っています。
|
|
21
|
-
touchstart は指が画面に触れたときのイベントなので、touches[0]はあります。
|
|
22
|
-
touchmove は画面に触れた指が移動したときのイベントなので、touches[0]はあります。
|
|
23
|
-
touchend は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。したがって、getTouchPosでエラーになります。
|
|
24
21
|
|
|
22
|
+
- **touchstart** は指が画面に触れたときのイベントなので、touches[0]はあります。
|
|
23
|
+
- **touchmove** は画面に触れた指が移動したときのイベントなので、touches[0]はあります。
|
|
24
|
+
- **touchend** は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。したがって、getTouchPosでエラーになります。
|
|
25
|
+
|
|
25
26
|
そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こしたtouchが入っていますので、期待する動作をしてくれるでしょう。
|
|
26
27
|
|
|
27
28
|
[https://codepen.io/hoo-chan/full/bvbRWp/](https://codepen.io/hoo-chan/full/bvbRWp/)
|
1
脱字を修正しました
answer
CHANGED
|
@@ -17,14 +17,14 @@
|
|
|
17
17
|
「**undefined の** 'clientX' は読めません」という意味です。したがって、問題は「clientX がない」ではなく、「touches[0] がない」です。
|
|
18
18
|
|
|
19
19
|
コードをみると touchstart, touchmove, touchend で getTouchPos を呼んでいますが、touchend ではうまくいかないでしょう。
|
|
20
|
-
event.touchesはそのイベントがおきた
|
|
20
|
+
event.touchesはそのイベントがおきたときのタッチの数だけ中身が入っています。
|
|
21
|
-
touchstart は指が画面に触れたのイベントなので、touches[0]はあります。
|
|
21
|
+
touchstart は指が画面に触れたときのイベントなので、touches[0]はあります。
|
|
22
|
-
touchmove は画面に触れた指が移動したのイベントなので、touches[0]はあります。
|
|
22
|
+
touchmove は画面に触れた指が移動したときのイベントなので、touches[0]はあります。
|
|
23
|
-
touchend は指が画面から離れたときのイベントで、そ
|
|
23
|
+
touchend は指が画面から離れたときのイベントで、それが画面に触れていた最後の指だった場合、touches は空になります。したがって、getTouchPosでエラーになります。
|
|
24
24
|
|
|
25
|
-
そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こした
|
|
25
|
+
そこで、touchesの代わりにchangedTouchesを使います。event.changedTouchesには、そのイベントを起こしたtouchが入っていますので、期待する動作をしてくれるでしょう。
|
|
26
26
|
|
|
27
27
|
[https://codepen.io/hoo-chan/full/bvbRWp/](https://codepen.io/hoo-chan/full/bvbRWp/)
|
|
28
|
-
こちら↑に、
|
|
28
|
+
こちら↑に、touchイベントを見るためのアプリを作りました。指を離したときのtouchesとchangedTouchesの違いを確認してください。
|
|
29
29
|
|
|
30
30
|
問題が起こったときは、できるだけ分解して部品ごとに期待する動作をしているか確認するといいでしょう。
|