前提・実現したいこと
スマホ上で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
こちらのサイトを参考に作成しました。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。