Javascript / jQuery：输入“模糊”可防止触发“点击”

Question

jsBin ：
http://jsbin.com/eyARuHI/2/edit?html,css,js，输出

代码 ：

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

如@RGraham所建议，请尝试跟随JS。 您将能够看到每次单击按钮事件都会被触发。

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

Answer 2

您将需要停止冒泡事件。 尝试这个

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


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