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