![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
いつもお世話になっております。
jQueryでシンセサイザーのような鍵盤アプリを作ろうとしています。
スマホで画面をなぞった時にドレミの音が次々に鳴るようにするにはどうすれば良いですか。
例えば、次のような3個の要素に順に触れるようになぞった時には、ド、レ、ミ、と順に鳴るようにするにはどうすれば良いですか。
<style>div { border: 1px solid; padding: 1em }</style>
<div></div>
<div></div>
<div></div>
色々調べて、次のようなコードを書いたのですが、まだうまく動きません。
const key = $('div')
key.on('touchstart', function() {$(this).css('background', '#000')})
key.on('touchmove', function(e) {
const tc = e.originalEvent.touches[0], top = $(this).offset().top
if(tc.clientY < top || top + $(this).height() < tc.clientY) {
$(this).trigger('touchend')
$(document.elementFromPoint(tc.clientX, tc.clientY)).trigger('touchstart')
}
})
key.on('touchend', function() {$(this).css('background', '#fff')})
このコードは要素に触れるとその要素の色が変わり、離すと元の色に戻るようにしようとしています。
どうも標準の動きでは、タッチ点が次の要素上に来ても、指を離すまでは次の要素でのタッチイベントは発火しないようですので、touchmoveでタッチ点を監視し、タッチ点が次の要素に切り替わった時に、前の要素で強制的にtouchendを発火させ、次の要素で強制的にtouchstartを発火させています。
これにて、1個目の要素から2個目の要素に移った時に、意図した通りに色が変わりました。
しかし、そのまま指を離さずに3個目の要素までなぞった時には、意図した通りに色が変わりません。
この時、2個目の要素の色が消え、3個目の要素に色が付くようにしたいのですが、実際には2個目と3個目の両方の要素に色が付いてしまいます。
また、このコードでは、やむなく強制的にイベントを発火させるという暴挙に出ていますが、可能であればもっと単純な書き方をご教示いただきたく存じます。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_04.png?e8efa67)
- 画像を添付する (ファイルサイズ:10MB以内、ファイル形式:JPG/GIF/PNG)
- 今の自分の気分スタンプを選ぼう!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript <div>のタッチ状態を維持したままラジオボタンを切り替えられるようにするには 1 2024/07/24 22:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでシンセサイザーを作っている途中なのですが、たまに指を離しても音が止まらなくなります 5 2024/07/15 22:25
- JavaScript Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい 1 2024/04/08 02:46
- JavaScript 【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法 2 2023/09/06 14:02
- HTML・CSS CSS初心者です。わかる方教えてください。 3 2023/09/08 22:04
- JavaScript 指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください 2 2023/04/27 17:58
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript 変数名をどのようにつけるのが良いかアドバイスお願い致します 4 2024/02/28 19:44
- HTML・CSS サイトにコンテンツを並べる際の CSS についてアドバイスお願い致します。 5 2024/07/08 21:39
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div>のタッチ状態を維持したま...
-
画像の表示位置
-
変数宣言と初期値代入の場所に...
-
jQueryでシンセサイザーを作っ...
-
追加ボタンを押した際に ok ボ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
-
変数名をどのようにつけるのが...
-
ボタンを押したあとに画像を表...
-
disabled プロパティが表示され...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
読み込んだQRコードをフォーム...
-
追加ボタンを押した際に ok ボ...
-
①入力フォーム→②確認表示画面→③...
-
階層別の組織図の自動作成について
-
セレクトボックスで配列を呼び...
-
jsonテキストデータの並び替え...
-
【Google Apps Script】「ライ...
-
二次元配列を使って順位をだす...
-
初心者です。gulpでコンパイル...
-
jQueryで同じクラス名のものを...
-
HTMLでサブフレームから親のス...
-
Colorboxがうまく設置できません
-
セレクトを全て選択されていな...
-
画面遷移を行わずに同一ページ...
-
フォームが空欄の時にフォーム...
-
Googleフォームで選択肢に応じ...
-
【GAS】WEBアプリでハイパーリ...
-
jsで質問です。 ボタンが二つ存...
-
GASでチェックボックスを一括of...
おすすめ情報