![](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_05.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 …
お世話になっております。
スクリプトの最後に、
$('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')
})
これで、鍵を押しながらラジオボタンを押すと鍵が灰色になるようになりました。
しかし、ラジオボタンのチェックは変更されませんでした。
つまり鍵を押しながらラジオボタンを押すと、鍵は灰色に変わるのですが、なぜかラジオボタンの選択状態が変更されません。
ですからスクリプトで、選択されたラジオボタンをチェックするようにしました。
冗長な感じがして少し気持ち悪いですが、これで意図した通りの動きになりました。
お探しの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>のタッチ状態を維持したま...
-
JW FLV Playerのプレイリスト連...
-
「jquery.csv2table.js」から生...
-
JavaScriptプラグインが読み込...
-
複数のjavascriptを使うと動か...
-
<a href="#" …>の意味を教えて...
-
ページを訪問者にたった一度だ...
-
JavaScriptでの実装
-
window.openでフルスクリーン表...
-
javascript内で外部ファイルを...
-
processing
-
bodyにidをつける理由は何ですか?
-
<object data="">の挙動について
-
pythonのWebスクレイピングでfi...
-
変数の代入値を外部の.txtファ...
-
外部読み込みで動かないときの...
-
macでjavascriptを記述するには...
-
プルダウンメニューを別ファイ...
-
複数のiframeの読み込みについて
-
iframe子ページから親ページへ...
マンスリーランキングこのカテゴリの人気マンスリー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を作...
-
マウスオーバー+クリカブルマッ...
おすすめ情報