javascript - Javascript/jQuery: 入力「ぼかし」により「クリック」が発生しない

Question

jsBin :
http://jsbin.com/eyARuHI/2/edit?html,css,js,output

コード:

$('#in').on('blur', function(event) {
  alert('input: ' + event.type);
});
$('#button').on('click', function(event) {
  alert('button: ' + event.type);
});

HTML :

<input id='in' type='text'>
<div id='button'></div>

問題:
入力にフォーカスしてからボタンをクリックすると、click決して起動されません。

そのような場合にクリックイベントを適切に処理するにはどうすればよいですか?

Answer 1

バブルイベントを停止する必要があります。これを試して

$('#button').on('click', function(event) {
  alert('button: ' + event.type);
  return false;
});


$('#in').on('blur', function(event) {
  alert('input: ' + event.type);
});

Answer 2

@RGraham で提案されているように、JS に従ってみてください。クリックするたびにボタンイベントが発生することがわかります。

$('#in').on('blur', function(event) {
  console.log('input: ' + event.type);
});
$('#button').on('click', function(event) {
  console.log('button: ' + event.type);
});