javascript - jQuery：绑定 2 个事件并只执行一个

Question

我有一个表格，当我单击一个单元格时，该单元格变成可编辑的。如果我更改单元格的内容，我想执行 AJAX 请求以将数据保存到数据库中，前提是：

1. 专注于细胞外
2. 按回车键

问题是，如果我按“Enter”，事件会执行两次，如果我离开单元格，则执行一次；我想我知道为什么：输入按键也可以作为焦点输出。这是代码：

$(document).on('focusout keypress', '.row_data', function(event){..}

我试图在事件中限制它：

if ( (event.type === "keypress" && event.which === 13) || (event.type === "focusout" && event.which !== 13) ) {...}

但不幸的是，它不起作用。

知道为什么这会失败吗？知道我怎样才能让它工作吗？

提前致谢！

Answer 1

在再次触发之前添加一个标志以查看此事件是否已经触发如何？

$(document).on('focusout keypress', '.row_data', function(event){
    if ($(this).data('has-event-fired') {
        // Event already fired! Reset our flag and bail!
        $(this).data('has-event-fired', false);
        return;
    }

    // First time we're firing here. Set our flag and fire event as normal.
    $(this).data('has-event-fired', true);

    // Rest of event handler
}

这应该会强制您的事件在每个操作中只触发一次，并且会在两个事件触发后自行重置。但是，如果只有一个事件成功触发，它可能会变得很不稳定，但值得一试。

Answer 2

尝试添加event.stopPropagation();到您的回调函数，然后只听 focusout

$('td').on('focusout', '.row_data', function(event){
    event.stopPropagation();
}

Answer 3

event.preventDefault() 可以停止控制此默认行为，您可以相应地检查条件。