Javascript/jQuery: input 'blur' prevents 'click' being fired

Question

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

Code :

$('#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>

Issue :
If focus the input and then click on button - click will never be fired.

How to properly handle click event in such cases?

Answer 1

As suggested by @RGraham try following JS. You will be able see that button event get fired every time when you click on it.

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

Answer 2

you will need stop bubbling events. Try this

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


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