私のエンターキーが$ .focus（）経由でカスケード接続されているのはなぜですか？私は、テキストボックスとボタンがある場合は

Question

は：

<input id='text'/> <button id='btn'>Click me</button> 

そして、私のボタンを、テキストボックスにフォーカスを送り、どこかでイベントをクリックします：

$(document).ready(function(){ 

    $('#btn').click(function(event){ 
    console.log('btn '); 
    $('#text').focus(); 
    }); 

    $('#text').keyup(function(event){ 
    console.log('key '); 
    }); 

}); 

...あなたがに入力したキーを使用している場合何らかの形でボタンをクリックすると、フォーカスを受け取っているテキスト要素もEnterキー押しを受け取ります。

https://jsfiddle.net/qup6keLd/

は、Enterキーを押して、ボタンにフォーカスを設定するには、Tabキーを使用します。

は、ここでは、この動作を示すフィドルです。両方のイベントがトリガーされます。スペースを使用してボタンのクリックをトリガーすることはできません。なぜこれが起こっているのですか？（focus（）コールを外す以外に）どうしたらいいですか？

Answer 1

keyupイベントの代わりにkeypressイベントを使用します。

jQuery documentation details 2つの違い。私はイベントは、ツリーの下伝播していると思います

$(document).ready(function(){ 
    $('#text').keypress(function(event){ 
    $('#output').append('key '); 
    }); 
    $('#btn').click(function(event){ 
    $('#text').focus(); 
    $('#output').append('btn '); 
    }); 
}); 

Updated Fiddle