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);
});