实现目标:

  • input框失去焦点时只触发函数A
  • input框编辑完内容回车时触发函数B
var taskBox = $('#todoList');//获取input框

taskBox.on('blur', '.edit', function(e)  {
    console.log('blur');
});

taskBox.on('keyup', '.edit', function(e)  {
    e.keyCode === 13 && console.log('enter');
});

此时产生了问题:
编辑完内容回车后触发keyup事件的同时也触发了blur事件
image.png

解决方法
keyCode属性是这二者的一个不同之处,所有利用该属性来限制blur事件的触发

taskBox.on('blur', '.edit', function(e)  {
    if (e.keyCode == undefined) {
        return;
    }
    console.log('blur');
});

taskBox.on('keyup', '.edit', function(e)  {
    e.keyCode === 13 && console.log('enter');
});

拓展:
如果两个事件都向触发函数A,并二者冲突时只调用一次函数?怎么解决
我们可以keyup事件中去主动触发blur事件

taskBox.on('blur', '.edit', function(e)  {
    console.log('函数A');
});

taskBox.on('keyup', '.edit', function(e)  {
    e.keyCode === 13 && (e.target.blur());
});

西伯利亚狼
1 声望0 粉丝