javascript - 按 Enter 键后使用 Preventdefault 退出循环

Question

这是对我最初问题的完整修订，所有不必要的资源和引用都已删除

我将同一个事件监听器绑定(bind)到 2 个不同的元素:一个按钮和 Enter 键，它如下所示:

var funcelement = function(){
    //function code
};


$('#buttonID').click(funcelement);


$('#inputID').keyup(function () {
   if (event.which == 13) {
      $('#buttonID').trigger('click');
   }
})

我想要做的是，如果焦点位于提交按钮(#buttonID)上，则通过使用 PreventDefault() 来阻止 Enter 键按下的传播。

所以我尝试了各种组合来使其发挥作用。以下是我尝试的最新结果

$('#inputID').keyup(function () {
   var hasfocus = $('#buttonID').is(':focus') || false;

   if (event.which == 13) {
      if (!hasfocus) {
         event.preventDefault();
         $('#buttonID').trigger('click');
         //hasfocus = true;
      }

      else {
         //event.preventDefault();
         //$('#buttonID').trigger('click');
     }

   }
})

在输入框中输入文本并按 Enter 键后，会弹出一个带有"is"/“取消”按钮的确认窗口，焦点位于"is"按钮上。再次按 Enter 后，会弹出另一个窗口，确认已进行更改，其中“确定”按钮集中在该窗口上。当我再次按下 Enter 键时，我需要的一切都已完成。

但是，有一个问题:完成最后一步后，我将返回到 if (!hasfocus) 行。

如何防止这种情况发生？一旦我需要的东西完成了 - 我不想再进入那条线了。

Answer 1

您可以将参数传递给函数并停止传播，如下所示:

var funcelement = function(event, wasTriggeredByEnterKey){
   if (wasTriggeredByEnterKey && $('#buttonID').is(':focus')) {
       event.stopPropagation;
   }

    //function code
};


$('#buttonID').click(funcelement);



$('#inputID').keyup(function () {
    if (event.which == 13) {
        $('#buttonID').trigger('click', [true]);
    }
  }
)

更新

为了回答您修改后的问题，您在处理警报时应该使用“keydown”事件而不是“keyup”。这是因为警报随着“keydown”事件关闭，但当您释放 Enter 键时仍然触发“keyup”事件。只需更改一个单词，如下所示:

$('#inputID').keydown(function () {
   var hasfocus = $('#buttonID').is(':focus') || false;

   if (event.which == 13) {
      if (!hasfocus) {
         event.preventDefault();
         $('#buttonID').trigger('click');
         //hasfocus = true;
      }

      else {
         //event.preventDefault();
         //$('#buttonID').trigger('click');
     }

   }
})