Q&A
ありがとうございます。2種類の方法があるのですね。ともて勉強になります。
下記のコードは、javascriptのキーコード32番のスペースキーを押したら、<div id="hello">Hello!!</div>の文字が赤色が変わるようにしています。ただ問題がありまして、
通常、ブラウザ上で、スペースキーを押すと、画面に収まらないページの場合、下にスクロールしてしまいます。この場合も、スペースキーを押すと、文字の色は変わりますが、同時に、下にスクロールしてしまいます。スペースキーを押しても、色は変えつつ、スクロールさせないようにするにはどのようにすればよいでしょうか?
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <script> document.onkeydown = pageMove; function pageMove() { if (event.keyCode == 32) { $('#hello').css('color', 'Red'); } } </script> <div id="hello">Hello!!</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>
回答4件
0
以下のようにすることで実現できると思いますが、いかがでしょうか？また、引数を使わずにイベントを参照する方法はIEの独自拡張で、Firefoxなど一部の主要ブラウザで正常に動作しなかったと思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 7</head> 8<body> 9<script> 10 document.onkeydown = pageMove; 11 12 function pageMove(event) { 13 if (event.keyCode === 32) { 14 $('#hello').css('color', 'Red'); 15 return false; 16 } 17 } 18</script> 19<div id="hello">Hello!!</div> 20<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 21<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 22</body> 23</html>
投稿2017/09/01 18:06
総合スコア14731
0
ベストアンサー
自前のイベントハンドラ pageMove() を処理後、イベントが伝搬してデフォルトのスクロールするイベントハンドラが実行されているわけですね。スクロールするハンドラを実行させない方法としては、(1) イベントを伝搬させない、(2) イベントは伝搬させつつデフォルトのハンドラを起動しない、の二つがあるかと思います。
今回のケース、私だったら、
js
1 if (event.keyCode == 32) 2 { 3 $('#hello').css('color', 'Red'); 4 return false; // <- 追加。ここでイベントのもみ消し 5 }
と 1 行追加し、スペースが押された場合は自前処理後にイベントをもみ消し、以降のイベントハンドラが起動しないようにしてしまいます。
次の記事などは参考になるのではないでしょうか。
[JavaScript] e.preventDefault とか e.stopPropagation とか return false - Qiita
投稿2017/09/01 17:47
総合スコア2468
0
event.preventDefault() とかどうでしょう。
【event.preventDefault - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault
投稿2017/09/01 17:11
総合スコア69625
0
タイピングゲームを作っていて毎回スペースキーを押すと画面がスクロールしてしまうを防ぎたくevent.preventDefalt()で以下のコードで解決しました。
document.addEventListener('keypress',(e)=>{
if(e.key == ' ')
event.preventDefault();
});
投稿2023/05/11 00:00
総合スコア2
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/02 16:14