<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 …

この回答へのお礼

お世話になっております。
スクリプトの最後に、
$('input').change(() => 鍵.css('background', '#777'))
を追加しました。
これで、ラジオボタンを押すと鍵が灰色になるようになりました。
しかし、「鍵」（＝div要素）を押しながら、ラジオボタンを押そうとすると、ラジオボタンは反応しませんでした。

また、次のようにdocumentにイベントを設定するように変更してみました。
$(document).on('touchstart', e => {
if(e.target.matches('input')) 鍵.css('background', '#777')
else if(e.target.matches('div')) 鍵.css('background', '#000')
})
$(document).on('touchend', e => {
if(e.target.matches('div')) 鍵.css('background', '#fff')
})
これで、鍵を押しながらラジオボタンを押すと鍵が灰色になるようになりました。
しかし、ラジオボタンのチェックは変更されませんでした。
つまり鍵を押しながらラジオボタンを押すと、鍵は灰色に変わるのですが、なぜかラジオボタンの選択状態が変更されません。
ですからスクリプトで、選択されたラジオボタンをチェックするようにしました。
冗長な感じがして少し気持ち悪いですが、これで意図した通りの動きになりました。

お礼日時：2024/07/25 11:51