取消从另一个元素的事件事件触发（模糊）（点击）

Question

我有几文行，我可以“编辑”通过与输入，后者从该行的文本作为其值属性内联替换该行。

当输入焦点失去，以前的文本被恢复。

当按回车键（键代码13），新的文本被保存，并会在该行中写入。

现在，谁不知道按回车键保存文本的用户，我想补充旁边的输入字段中的“保存”按钮。但是当按下它时，输入字段的模糊事件会先被触发，放弃更改。

那么，有没有一种简单的方法，该按钮。点击（）事件可以取消在输入栏.blur（）事件？也许是“不要执行其他事件”，或者我可能在模糊事件中看到哪些事件将在下一次被调用以取消它？

这里是一个要的jsfiddle明白我的意思：http://jsfiddle.net/ykY5X/ （我在Firefox（最新每晚），其中按一下按钮将无法正常工作工作我只是测试的jsfiddle也在镀铬，其中也KEYUP如将无法正常工作。）

$('#showEdit').click(function() { 
    $('#row').data('text',$('#row').text()); 
    $('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>'); 
    $('#editInput').val($('#row').data('text')).focus(); 
}); 

$('#row').delegate('#editInput','keyup',function(e) { 
    e.stopPropagation(); 
    var keycode = e.keyCode || e.which; 

    if (keycode == 13) $('#editSave').click(); 
}).delegate('#editSave','click',function(e) { 
    e.stopPropagation(); 

    $('#row').text($('#editInput').val()); 
}).delegate('#editInput','blur',function() { 
    $('#row').text($('#row').data('text')); 
}); 

Answer 1

我最后工作的解决方案是这样的：

$('#showEdit').click(function() { 
    $('#row').data('textOriginal',$('#row').text()); 
    $('#row').data('textSave',$('#row').text()); 
    $('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>'); 
    $('#editInput').val($('#row').data('textOriginal')).focus(); 
}); 

$('#row').delegate('#editInput','keyup',function(e) { 
    e.stopPropagation(); 
    var keycode = e.keyCode || e.which; 
    if (keycode == 13) { 
     $('#row').data('textSave',$(this).val()); 
     $('#editSave').click(); 
    } 
}).delegate('#editSave','mousedown',function() { 
    $('#row').data('textSave',$('#editInput').val()); 
}).delegate('#editSave','click',function(e) { 
    e.stopPropagation(); 

    if ($('#row').data('textOriginal') == $('#row').data('textSave')) { 
     $('#row').text($('#row').data('textOriginal')); 
     return; 
    } 

    $('#row').text($('#row').data('textSave')); 

}).delegate('#editInput','blur',function() { 
    $('#editSave').click(); 
}); 

http://jsfiddle.net/RSUdx/

Answer 2

.unbind允许u到解除绑定。[docs]

编辑

使用​​代替keyup

Answer 3

我觉得你可以试试这个：

$('#showEdit').click(function() { 
    $('#row').data('text',$('#row').text()); 
    $('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>'); 
    $('#editInput').val($('#row').data('text')).focus(); 
}); 

$('#row').delegate('#editInput','keyup',function(e) { 
    e.stopPropagation(); 
    var keycode = e.keyCode || e.which; 
    if (keycode == 13) $('#editSave').click(); 
}).delegate('#editSave','click',function(e) { 
    e.stopPropagation(); 

    $('#row').text($('#editInput').val()); 

}).delegate('#editInput','blur',function() { 
    if($('#editSave').click()) 
     $('#row').text($('#editInput').val()); 
    else 
    $('#row').text($('#row').data('text')); 
}); 

Answer 4

你可以在里面blur事件处理程序被执行的代码之前使用一些延迟。在保存按钮上单击，您可以取消blur定时器，以便它不会被执行。

工作demo

var blurTimer; 
$('#showEdit').click(function() { 
     $('#row').data('text',$('#row').text()); 
     $('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>'); 
     $('#editInput').val($('#row').data('text')).focus(); 
}); 

$('#row').delegate('#editInput','keyup',function(e) { 
    e.stopPropagation(); 
    var keycode = e.keyCode || e.which; 
    if (keycode == 13){ 
     $('#editSave').click(); 
    } 
}).delegate('#editSave','click',function(e) { 
    clearTimeout(blurTimer); 
    $('#row').text($('#editInput').val()); 
}).delegate('#editInput','blur',function() { 
    blurTimer = setTimeout(function(){ 
     $('#row').text($('#row').data('text')); 
    }, 200); 
});