根据用户输入风格调用不同的事件 javascript

Question

我有一个 div，其中包含一个用于输入一些值的输入元素。在按下 enter 或 onFocusOut 事件时，这些值将作为列表元素添加到 div 上方。到此为止就好了。但是如果用户键入一些值并且不按回车键并直接单击保存按钮，则不应调用 div 的 onFocusOut 函数。相反，它应该采用该类型的值并调用一些 save 函数。你对如何检测它有什么建议吗？

我的代码片段在这里

JS:

 divInput.onkeypress = function (event){
                return someTestFunc();
    }


    divInput.tabIndex="-1";

    $(divInput).focusout(function (e) {
        if ($(this).find(e.relatedTarget).length == 0) {
            addToList();
        }
    });

Answer 1

这不是一个非常巧妙的解决方案，但您可以在将项目添加到列表之前使用 setTimeout，并在 save.button 单击时清除 setTimeout。试试这个：

var $saveButton = $('#exampleButton')[0],
    $divInput = $('#exampleInput')[0],
    timedEvent = -1;

$($saveButton).on('click', function(event){
    if(timedEvent) {
        clearTimeout(timedEvent)
    }
    alert('not add to list & save');
})


$divInput.tabIndex="-1";

$($divInput).on('focusout', function(e) {
    timedEvent = window.setTimeout(function() {
        if ($(this).find(e.relatedTarget).length == 0) {
            alert('add to list');
        }
    }, 200);
});

勾选这个working fiddle

根据用户输入风格调用不同的事件 javascript

call different events based on user input style javascript

javascript

javascript-events