質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

1585閲覧

jsでタッチし終えた直後の判定を取得したい

GrossNets

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/08/12 05:03

編集2019/08/12 05:54

前提・実現したいこと

スマホ上でJavasScriptを使って正解ワードと横に3つ並ぶタッチ判定のあるP要素を用意したとき、
正解ワードと同じ要素が押されたかどうか判定するシステムを作っています。
タッチする機構は作成できたのですが、判定の機能で以下の問題が発生しました。

発生している問題

現在のシステムだとタッチした瞬間の判定が維持されてしまいます。
仮に、タッチした瞬間は正しいところが押されているが、指を離した瞬間は違うところに押されていた際には間違っている判定にさせたいのですが、正しい判定がされてしまいます。

該当のソースコード

JavaScript

1var $document = $(document); 2 var $btn1 = $('#btn1'); 3 var $btn2 = $('#btn2'); 4 var $btn3 = $('#btn3'); 5 6 var ans = new Boolean(false); 7 var end = new Boolean(false); 8 9 var supportTouch = 'ontouchend' in document; 10 11 var EVENTNAME_TOUCHSTART = supportTouch ? 'touchstart' : 'mousedown'; 12 var EVENTNAME_TOUCHMOVE = supportTouch ? 'touchmove' : 'mousemove'; 13 var EVENTNAME_TOUCHEND = supportTouch ? 'touchend' : 'mouseup'; 14 15var updateXY = function(event) { 16() 17} 18var handleStart = function(event) { 19 ans = false; 20 end = false; 21 updateXY(event); 22 bindMoveAndEnd(); 23 }; 24 var handleMove = function(event) { 25 event.preventDefault(); 26 updateXY(event); 27 }; 28 29 var handleEnd_1 = function(event) { 30 select = select_1; 31 end = true; 32 if (word == select_1) { 33 ans = true; 34 } 35 updateXY(event); 36 unbindMoveAndEnd(); 37 }; 38(2,3と同じもの) 39 40 var bindMoveAndEnd = function() { 41 $document.on(EVENTNAME_TOUCHMOVE, handleMove); 42 $btn1.on(EVENTNAME_TOUCHEND, handleEnd_1); 43 $btn2.on(EVENTNAME_TOUCHEND, handleEnd_2); 44 $btn3.on(EVENTNAME_TOUCHEND, handleEnd_3); 45 }; 46 47 var unbindMoveAndEnd = function() { 48 $document.off(EVENTNAME_TOUCHMOVE, handleMove); 49 $btn1.off(EVENTNAME_TOUCHEND, handleEnd_1); 50 $btn2.off(EVENTNAME_TOUCHEND, handleEnd_2); 51 $btn3.off(EVENTNAME_TOUCHEND, handleEnd_3); 52 }; 53 54 $document.on(EVENTNAME_TOUCHSTART, handleStart); 55 56 $document.on(EVENTNAME_TOUCHEND, function(event) { 57 unbindMoveAndEnd(); 58 });

補足情報

https://app.codegrid.net/entry/touch-mouse
こちらのサイトを参考に作成しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

スワイプの場合は、現在タッチされている座標を取得して、一定の位置へ動いたときに、そのイベントを取得するという手法を用いるとうまくいくようです。

タッチイベントを用いたスワイプ&フリックの実装サンプル

投稿2019/08/30 08:31

FKM

総合スコア3633

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

素直にclickイベントを使ってはダメでしょうか?

clickイベントであれば、mousedownの位置とmouseupの位置が違うと、その位置を両方カバーしている要素でイベントが発火するので、要件を満たせそうな気がします。

投稿2019/08/14 11:13

KuwabataK

総合スコア306

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

GrossNets

2019/08/22 06:02

回答頂きありがとうございます。 clickイベントで実装してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問