从其他元素的事件中取消事件触发(模糊)(单击)

时间:2011-09-04 16:49:25

标签: javascript jquery events

我有一些带文本的行,我可以通过用输入替换内联行来“编辑”,该输入将行中的文本作为其value属性。

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

当按下return(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'));
});

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:2)

我的最终解决方案是:

$('#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/

答案 2 :(得分:1)

我想你可以试试这个:

$('#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'));
});

答案 3 :(得分:-1)

.unbind允许您取消绑定。[docs]

修改

使用keydown代替keyup