![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
いつもお世話になっております。
jQueryでシンセサイザーを作ろうとしています。
シンセサイザーの一般的な機能として、鍵盤を押したまま、他のスイッチやスライダーを操作して、発音中の音を変える事を実現したいのですが、うまくいきません。
問題を再現させるための最小限のコードは次のとおりです。
<input type="radio" name="t">
<input type="radio" name="t">
<div style="padding: 1em; border: 1px solid"></div>
<script src="jquery.min.js"></script>
<script>
const 鍵 = $('div')
鍵.on('touchstart', () => 鍵.css('background', '#000'))
鍵.on('touchend', () => 鍵.css('background', '#fff'))
</script>
このコードでは、鍵盤を<div>、音の変更スイッチをラジオボタンで作っています。
鍵盤をタッチすると、鍵盤の色が変わり、離すと元の色に戻ります。
しかし、鍵盤を押したままの状態でラジオボタンを押そうとしても反応しません。
鍵盤を押したままの状態で、ラジオボタンも操作できるようにするには、どうすれば良いかご教示ください。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_01.png?e8efa67)
- 画像を添付する (ファイルサイズ:10MB以内、ファイル形式:JPG/GIF/PNG)
- 今の自分の気分スタンプを選ぼう!
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんばんは
ご提示のスクリプトでは、
>鍵.on('touchstart' ~~~
のようにイベントを設定していますので、「鍵」(=div要素)で発生したイベントだけを取得します。
その状態で input要素にタッチしても(「鍵」ではないので)、当然ながら、ご提示の処理は実行されません。
input要素のイベントをとらえたければ、input要素にもイベント設定をする必要があります。
(タッチでなくchangeイベント等でも良いのかも)
一方で、対象要素が多い場合に、個々に設定していると面倒なので、documentにイベントを設定してまとめて取得し、イベント処理内で振り分けるという方法も考えられます。
前回も申し上げましたが、touchイベントは複数のタッチに対応していますので、まとめて設定するような場合には、changedTouches 属性などでタッチリストを取得して、それぞれに対して処理する必要があります。
https://developer.mozilla.org/ja/docs/Web/API/To …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでシンセサイザーを作っている途中なのですが、たまに指を離しても音が止まらなくなります 5 2024/07/15 22:25
- JavaScript 【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法 2 2023/09/06 14:02
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript Colorboxがうまく設置できません 2 2024/01/13 16:59
- その他(プログラミング・Web制作) seleniumbasic chrome操作について 1 2023/03/29 15:40
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript JavaScriptで作ったアプリが正常に動作しない。改善したい。 3 2024/01/06 16:33
- HTML・CSS HTMLでwebサイトを作ってるのですが、 ボタンが押された時にjsに書いている文章の 文字コードを 1 2023/11/16 23:21
- JavaScript Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい 1 2024/04/08 02:46
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div>のタッチ状態を維持したま...
-
マウスオーバー+クリカブルマッ...
-
base64encodeでの文字化けについて
-
jqueryについて(Lightboxとbxs...
-
複数のjavascriptを使うと動か...
-
Jqueryの干渉について
-
<a href="#" …>の意味を教えて...
-
bodyにidをつける理由は何ですか?
-
function の return 値を表示し...
-
親フレームのURLによって、...
-
ウインドウの後ろに隠れている...
-
Dreamweaver で 外部JSを読み込...
-
ホームディレクトリを示すチル...
-
location.reload() について
-
ハイパーリンクに下線を表示す...
-
ひとつのHTMLファイル内にcanva...
-
フォーカス移動抑止について
-
【jquery】EasyUIのSubGridにMy...
-
日数カウントダウンをホームペ...
-
window.openで404エラーがでます
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
シャドウボックスとjQueryを共...
-
lightboxの動作に関して
-
音楽再生用jQueryプラグイン「j...
-
CrossSlideのスライドショーが...
-
htmlで別ファイルのjavascript...
-
jQueryの基本的なことについて...
-
プラグイン無しでContactform7...
-
ebayの返信で『 Message may no...
-
DreamWeaverでJS
-
document.lastChild.appendChil...
-
パソコンでホームページを作成...
-
dojo(ライブラリ)のカレンダ...
-
jqeryのslicksliderのパスにつ...
-
jQueryのloadメソッドをする際...
-
フォントサイズを変更するボタ...
-
同一HTML内に複数のjQueryを作...
-
マウスオーバー+クリカブルマッ...
おすすめ情報