このJavaScriptコードは、1つのキーを無効にすることによっても、他のKeyPressイベントにも影響しますか? -- javascript フィールド と jquery フィールド と keypress フィールド と dom-events フィールド 関連 問題

Will this JavaScript code affect other keypress events too by disabling one key?












2
vote

問題

日本語

これを使用しています.Scrolling 'エフェクトを無効にすると、スペースバーにブラウザがあります。これは他のKeyPressイベントにも影響しますか?

<事前> <コード> window.onkeydown = function(e) { return !(e.keyCode == 32); };

誰かがこれが何をしているのか説明してください。このコードが悪いかどうかはわかりませんが、私のページの他のKeypress関連コードを無効にするようです、そして私はこれが理由ではないことを確認したいです。

ありがとう!

英語

I'm using this to disable the 'scrolling' effect the spacebar has in a browser. Will this affect other keypress events too?

window.onkeydown = function(e) {     return !(e.keyCode == 32); }; 

Could someone please explain what this is doing? I'm not sure if this code is bad, but it seems to disable other keypress related codes in my page, and I want to make sure this isn't the reason.

Thanks!

</div
           
 
 

回答リスト

2
 
vote
vote
ベストアンサー
 

ASCIIコード32は、スペースバーキーを表すASCII値であり、コードが検出されたときはいつでもブラウザにFALSEを返すように指示しています。 Falseが返されるため、自分が話すスクロールバー効果は実際には無効になっています。

しかし、この便利なスペースバースクロール無効化機能の残念な副作用は、ページ上のいたるところでSpacebarキープレスを無効にすることです。

FALSEを返す代わりに、キーコードが検出された場合は、現在のスクロールトップ値をSetTimeoutイベントに関数を返すクロージャーに渡します。 SetTimeoutが発射されると、Scrolltop PositionはSetTimeoutイベントが最初に登録されたときの値にリセットされます。

<事前> <コード> window.onkeydown = function(e) { if(event.keyCode == 32) { // alert($(document).scrollTop() ); setTimeout( (function(scrollval) { return function() { $(document).scrollTop(scrollval); }; })( $(document).scrollTop() ), 0); } };

あなたのユーザーは、入力テキストボックスやテキストエリア内のスペースバーを都合よく利用することができ、同時にテキスト要素に焦点を当てられていない間にスペースバーキーを押すと、ページスクロールが発生しなくなります。

フードの下では、スクロールはまだ行われています。ユーザーが気付かない場所に十分な速度でリセットされているだけです。

この値を100または1000に増やすと、フードの下に何が起こっているのかというより良い考えを与えます。実際にはページスクロールを見ると、前のスクロール位置に戻すことができます。

これはChromeとFirefox 13でのみテストされました。そのため、SetTimeout Duration - 現在0 - Internet Explorerのようなブラウザの別の値に調整する必要があるかもしれません。この機能を最新のブラウザでのみサポートすることで、必要に応じてこの機能をサポートすることで準備的に劣化するように準備してください。

更新:

参考のため、以下は主なブラウザでこの互換性を抑えるための方法です。それはChrome、Firefox、IE8、IE9、およびSafariでテストされています。

IE8 / IE9で機能しますが、それほど滑らかではありません。

<事前> <コード> // put the eventhandler in a named function so it can be easily assigned // to other events. function noScrollEvent(e) { e = e || window.event; if(e.keyCode == 32) { setTimeout( (function(scrollval) { return function() { $(document).scrollTop(scrollval); }; })( $(document).scrollTop() ), 0); } } // Chrome and Firefox must use onkeydown window.onkeydown = noScrollEvent; // Internet Explorer 8 and 9 and Safari must use onkeypress window.document.onkeypress = noScrollEvent;
 

ASCII code 32 is the ASCII value that represents the spacebar key, and your code is essentially telling the browser to return false whenever that keycode is detected. Since false is returned, the scrollbar effect you speak of is in fact successfully disabled.

However, the unfortunate side effect of this convenient spacebar-scroll-disabling function is that it disables spacebar keypresses everywhere on the page.

Instead of returning false, if the keycode is detected, pass the current scrollTop value into a closure that returns a function to a setTimeout event. When the setTimeout fires, the scrollTop position is reset back to the value it was in when the setTimeout event was first registered.

window.onkeydown = function(e) {     if(event.keyCode == 32) { // alert($(document).scrollTop() );         setTimeout(                              (function(scrollval) {                  return function() {                      $(document).scrollTop(scrollval);                 };             })( $(document).scrollTop() ), 0);     } }; 

Your users can still conveniently make use of spacebars in input textboxes and textareas, and at the same time, pressing the spacebar key while not focused on a text element will no longer result in the page scrolling.

Under the hood, the scroll is still taking place. It's just being reset at a rate fast enough to where the user doesn't notice.

If you increase this value to 100 or 1000, it will give you a better idea of what is going on under the hood. You'll actually see the page scroll and then get set back to the previous scroll position.

This was only tested in Chrome and Firefox 13! So you may have to adjust the setTimeout duration -- currently 0 -- to a different value in browsers like Internet Explorer. Be prepared to gracefully degrade -- by supporting this feature only in modern browsers -- if necessary.

UPDATE:

For reference, below is the method to use to make this compatible in the major browsers. It has been tested in Chrome, Firefox, IE8, IE9, and Safari.

While it does work in IE8/IE9, it isn't very smooth.

// put the eventhandler in a named function so it can be easily assigned    // to other events. function noScrollEvent(e) {     e = e || window.event;     if(e.keyCode == 32) {           setTimeout(                              (function(scrollval) {                  return function() {                      $(document).scrollTop(scrollval);                 };             })( $(document).scrollTop() ), 0);     } }   // Chrome and Firefox must use onkeydown window.onkeydown = noScrollEvent;  // Internet Explorer 8 and 9 and Safari must use onkeypress window.document.onkeypress = noScrollEvent; 
</div
 
 
       
       
1
 
vote

他の要素がキーダウンイベントにバインドされている場合、このコードでは影響しません

私のいじめを見て、キーダウンイベント

に聞いてテキストエリアを追加して削除してみてください。 <事前> <コード> window.onkeydown = function(e) { return !(e.keyCode == 32); }; document.getElementsByTagName("textarea")[0].onkeydown = function(e) { alert("hi"); }

> http://jsfiddle.net/hnd4y/

 

If another element is bound to the keydown event it will not be effected by this code

See my fiddle and try adding and remove the textarea listening to the keydown event

window.onkeydown = function(e) {     return !(e.keyCode == 32); };  document.getElementsByTagName("textarea")[0].onkeydown = function(e) {     alert("hi"); } 

http://jsfiddle.net/HnD4Y/

</div
 
 
   
   
1
 
vote

SetTimeoutで上記の答えは、0の遅れでまったく私のために働かなかったのではなく、遅れは50msを超えて走り始めましたが、それは顕著なページジャンプを引き起こしました。 SetTimeoutが早すぎるとページをスクロールしていたと思います、そしてクロムは後でそれを動かしました。

は私の解決策ですそれはうまく機能しています。ブラウザがページダウンを停止しないように、キーダウンイベントでfalseを返します。代わりにキーアップイベントを使用するには、ボタンなどに設定したイベントを確認します。

<事前> <コード> $(mySelector).keyup(eventHandlerFunction); [dom element].onkeydown = function(event) { if (event.keyCode == 32) {return false;} };

注:入力フィールドは、それらまたはそれらの親がこのOnKeyDown Handler

でカバーされている場合、スペースバーキーイベントを反映しません。
 

The answer above with the setTimeout did not work for me at all on Chome with a delay of 0. With a delay bumped above 50ms, it began to work, but that caused a noticeable page jump. I believe that setTimeout was scrolling the page up too early, then Chrome moved it down later.

Below is my solution that is working well. It returns false on the keydown event to prevent the browser from doing a page-down. Then you make sure event you set up on your button etc. to use the keyup event instead.

$(mySelector).keyup(eventHandlerFunction);  [dom element].onkeydown = function(event) {   if (event.keyCode == 32) {return false;} }; 

Note: input fields will not reflect spacebar key events if they or their parent are covered by this onkeydown handler

</div
 
 

関連する質問

23  キープレスイベントの後にテキストカーソル位置を取得する方法  ( How to get text cursor position after keypress event happened ) 
構文蛍光ペンを書いています。蛍光ペンはテキストを入力して矢印キーをナビゲートしながらすぐに強調表示を更新する必要があります。 私が直面している問題は、「KeyPress」イベントが発生したときに、<コード> window.getSelection() を介して...

1  一般的なブラウザによる一般共同閲覧アプローチ  ( General co browsing approach with common browsers ) 
未修正の標準的なWebブラウザの共同ブラウジングを実装するための解決策(接続されているブラウザ間で同期されている)を探しています。 PostMessage 。 しかし、私はブラウザ間で同期されるべきであるサイトにコードを入れる必要なしにそれをすることを好むで...

1  要素を隠すためのEventListener  ( Eventlistener for hiding an element ) 
要素の表示がなしに設定されているときにトリガされるJavaScriptイベントを見つけようとしています。 <コード> std::vector<string> MakeFileVector(string filename){ //Get the input fr...

0  フラッシュステージが焦点を当てています  ( Flash stage losing focus ) 
私はこの信じられないほど華麗なスクロールサムネイル画像ビューアーをフラッシュActionScript 3で作成しました.3。(基本的にはマウスの位置によっては上下にスクロールするだけです)。それはそうするように動作します(私はそれが最も画像の上部の画像を示すよ...

2  Chrome拡張子を使用してFacebookのテキストを置き換える  ( Replace text in facebook create post field using chrome extension ) 
Google入力ツールのようなChrome Extensionプロジェクトを操作しています。入力しながら、英語の文字を別の言語に置き換えます。 それはすべての入力、TextArea、コンテンツ編集可能なdiv、およびiframesでうまく機能します Bl...

0  Googleマップv3:Ajax - >データベース - > infowindow - >エラー  ( Google maps v3 ajax database infowindow error ) 
私はほとんどそれを得ました。ほとんど。 データベースからInfoWindowsにデータベースからデータベースをajaxにしようとしている後......データベース内の最後のエントリを除くすべてのマーカーは常に未定義になる。 これは fiddle 。 なぜ私は1...

26  IFRAMEを超えるとMouseMoveを検出しますか?  ( Detect mousemove when over an iframe ) 
ウィンドウ全体を占めるIFRAME(100%、100%高)、マウスが移動したときにメインウィンドウが必要です。 はすでにiframeの onMouseMove 属性を試してみましたが、明らかに機能しませんでした。 DIVのIFRAMEをそのように折り返してみま...

0  onclickイベントオブジェクトを引用符で囲みます  ( Onclick event with object as parameter in quotes ) 
Googleマップと場所APIの操作APIは、関数 generateinfowindow(場所)。の関数によって生成される各マーカーのinfoWindowsをレンダリングしています。 そこには、Googleマップマーカコンテンツ属性に渡される文字列 html...

33  AndroidのWebKitにはどのDOMイベントがありますか?  ( What dom events are available to webkit on android ) 
Androidユーザーを対象としたモバイルWebアプリを構築しています。私はDOMイベントが私に利用可能なのか知る必要があります。私は次の作業をすることができましたが、非常に確実にはありません: をクリックします マウスオーバー MouseDown ...

0  AddeventListenerリスナー関数をTypesScriptで渡す方法は?  ( How to pass arguments to addeventlistener listener function with typescript ) 
状況は多少のようなものです: <コード> const searchKeyPressHandler = (appDispatch: any, e: any) => { if (e.keyCode === 27) { appDispatc...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有