8

Chromeブラウザで、このスニペットを使用する場合：

  $(document).on('keyup', function(){
    alert("Hey");
  });

URLバーを押すたびにenter（たとえば、ページ自体のURLを切り取って貼り付けるとき）、イベントリスナーが起動します。なぜそれが起こるのですか？

編集：

URLバーがdocument（多分window？）になく、Firefoxにはこの動作がないので、私は驚きました。を探すとe.target、ChromeInspectorにが表示されますbody。

これはイベントのバブリングが原因である可能性があると思ったので、これを試しました。

  $(document).on('keyup', function(e){
    e.stopPropagation();
    alert("Hey");
  });

しかし、それは機能しません。トリガーされないようにするにはどうすればよいですか？

4

4 に答える 4

9

これは、オムニボックスでEnterキーを押すと、フォーカスがページに移動するために発生します。で同じことを試した場合onkeydown、オムニボックスは何も変更されません。これは、あなたが言ったように、それはドキュメントの一部ではないためです。keyupオムニボックスの誤ったイベントを除外する1つの方法は、すべてにペアのキーダウンがあることを確認することです。

<script>
var down = false;
document.addEventListener('keydown', function (){
    down = true;
}, false);

document.addEventListener('keyup', function (){
    if(down === true){
        alert('It was from the page!');
    }
    else{
        alert('Omnibox. Ignore it.');
    }
    down = false;
}, false);

</script>

デモ。

PasteHTML.comがそれをiframeに詰め込むので、独自のHTMLページを作成し、それを試してみてください。そこで正しく機能するには、最初にテキストをクリックしてiframeにフォーカスを合わせます。

デモ。 キーボードショートカットではなく、マウスを使用してオムニボックスに焦点を合わせて入力することを忘れないでください。（これにより、onkeydownイベントが発生し、誤検知が発生します）

更新： Chrome 35以降、これは発生しなくなりました。ただし、どのバージョンで修正されたかはわかりません。

于 2012-08-25T05:46:56.927 に答える
2

Chromeの解決策は簡単です。keypressの代わりに使用してkeyupください。これはすべての場合（IE）で機能するとは限らないため、ブラウザーによっては、条件を追加してタイプを切り替える必要がある場合があります。ただし、これで問題は解決します。

特定のキーコードを探すと、問題がなくなる可能性があることに注意してください。幸運を。

于 2012-08-25T07:07:07.943 に答える
1

キーコードをフィルタリングできます...それが役立つ場合...13はEnterキーです

$(document).on('keyup', function(event){
  if( parseInt(event.keyCode,10) !== 13 ){
      alert("Hey");
  } 
});​
于 2012-08-24T14:35:42.027 に答える
0

考えられる解決策は、「キーアップ」イベントハンドラーの登録をわずかに遅らせることです。これにより、ChromeとSafariで発生する可能性のある最初の「スプリアス」トリガーがスキップされます。

$(function() {
    setTimeout(
        function() {
            console.log("Delayed event attachment");
            $(document).bind('keyup', log);
        }, 10);
});

function log(e) {
    console.log(e.target.localName);
}
于 2012-08-26T15:48:09.450 に答える