jQuery：绑定2个事件，只执行一个

Question

我有一个 table，当我点击一个单元格时，该单元格变成 editable。如果我更改单元格的内容，我想执行一个 AJAX 请求以将数据保存到数据库，仅当：

将焦点移出单元格
按回车键

问题是如果我按 "Enter" 事件会执行两次，如果我将焦点移出单元格则事件会执行一次；我想我知道为什么：输入按键也符合 focusout 的条件。这是代码：

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

我试图在活动中限制它：

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

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

知道为什么会失败吗？知道我如何让它发挥作用吗？

提前致谢！

Answer 1

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

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

Answer 2

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

Answer 3

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

$(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
}

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

jQuery：绑定2个事件，只执行一个

jQuery: Bind 2 events and execute only one

javascript

jquery

keyboard-events

jquery-focusout