[英]Cancel event triggering (blur) from another element's event (click)
我有几行文本,我可以通过用输入替换内联行来“编辑”,该输入将行中的文本作为其value属性。
当输入失去焦点时,将恢复先前的文本。
按return(keyCode 13)时,将保存新文本并将其写入行中。
现在,对于不知道按返回保存文本的用户,我想在输入字段旁边添加一个“保存”按钮。 但是当按下它时,输入字段的模糊事件将首先被触发,丢弃更改。
那么有一个简单的方法,按钮的.click()事件可以取消输入字段上的.blur()事件吗? 也许是“不执行其他事件”或者我可以在模糊事件中看到哪些事件会被调用,然后取消它?
这是一个jsfiddle,看看我的意思: http : //jsfiddle.net/ykY5X/ (我在Firefox(最新的Nightly)工作,按钮点击不起作用。我刚刚在chrome中测试了jsfiddle,密钥在哪里也不会按预期工作。)
$('#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'));
});
您可以在执行blur
事件处理程序中的代码之前使用一些延迟。 在保存按钮单击您可以取消blur
计时器,以便它不会被执行。
工作演示
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);
});
我的最终解决方案是:
$('#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();
});
我想你可以试试这个:
$('#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'));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.