<div>のタッチ状態を維持したままラジオボタンを切り替えられるようにするには

いつもお世話になっております。
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>、音の変更スイッチをラジオボタンで作っています。
鍵盤をタッチすると、鍵盤の色が変わり、離すと元の色に戻ります。
しかし、鍵盤を押したままの状態でラジオボタンを押そうとしても反応しません。

鍵盤を押したままの状態で、ラジオボタンも操作できるようにするには、どうすれば良いかご教示ください。

No.1 回答者： fujillin 回答日時： 2024/07/25 00:04

こんばんは

ご提示のスクリプトでは、
　＞鍵.on('touchstart'　～～～
のようにイベントを設定していますので、「鍵」（＝div要素）で発生したイベントだけを取得します。
その状態で input要素にタッチしても（「鍵」ではないので）、当然ながら、ご提示の処理は実行されません。
input要素のイベントをとらえたければ、input要素にもイベント設定をする必要があります。
（タッチでなくchangeイベント等でも良いのかも）

一方で、対象要素が多い場合に、個々に設定していると面倒なので、documentにイベントを設定してまとめて取得し、イベント処理内で振り分けるという方法も考えられます。
前回も申し上げましたが、touchイベントは複数のタッチに対応していますので、まとめて設定するような場合には、changedTouches 属性などでタッチリストを取得して、それぞれに対して処理する必要があります。
https://developer.mozilla.org/ja/docs/Web/API/To …