javascript - 从另一个元素的事件(单击)取消事件触发(模糊)

Question

我有几行文本，我可以通过用输入替换内联行来“编辑”这些行，输入从行中获取文本作为其值属性。

当输入失去焦点时，恢复之前的文本。

当按下回车键(keyCode 13)时，新文本被保存并写入行中。

现在，对于不知道按回车键来保存文本的用户，我想在输入字段旁边添加一个“保存”按钮。但是当按下它时，输入字段的模糊事件首先被触发，丢弃更改。

那么有没有一种简单的方法，让按钮的.click()事件可以取消输入框的.blur()事件呢？也许是“不执行其他事件”，或者我是否可以在模糊事件中看到接下来将调用哪些事件来取消它？

这是一个 jsfiddle 来理解我的意思:http://jsfiddle.net/ykY5X/ (我在 Firefox(最新的 Nightly)中工作，按钮点击不起作用。我刚刚也在 chrome 中测试了 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/