Javascript将多个事件绑定到单个函数，导致执行多个函数

Question

我对JavaScript非常陌生（目前对编程，学习Django，JQuery和JavaScript还是很陌生）。 无论如何，我正在尝试编写一个JS函数，以允许用户单击DOM中的一个元素，从而创建一个输入字段，以便用户可以动态更改该元素的文本内容。 然后，我将发送JSON / AJAX请求以更改数据库的内容以反映更改。

我的工作最多，但是注意到一个小问题。 我将3个事件绑定到该函数； 键，聚焦和键按下。 当用户单击远离输入的位置以及按下回车键时，我试图捕获每个被按下的键（以动态更新DOM中的另一个元素以反映更改的类型）。 单击并为每次按键触发触发都可以，但是按回车键给我带来了一个问题。 我必须添加keydown事件来捕获此事件。 不过似乎正在发生的事是所有三个事件都正在触发（即我的AJAX POST发送了3次）。 无法解决此问题。 尝试了几件事（例如，禁用事件冒泡），但是我对JS还是很陌生，所以我有点不了解并解决了这个问题。 在此先感谢您发布任何答案。 以下是我编写的JS，可能不是最高效的JS，我敢保证我会及时学习如何精简它。

如何确保按下Enter键后功能一次运行？

预先感谢，下面的代码。

/* track key pesses on menu name being updated */
$(document).on('keydown keyup focusout','.name_input',function(event){
  /* added to try and fix multiple AJAX requests, doesnt seem to work though */
  event.cancelBubble = true;
  var levelurl;
  var menu_id = parseInt($(this).attr("menu_id"));
  var menu_root = $(this).attr("menu_root");
  var el = '#subrelative' + menu_id;
  var $input = $(this);
  if (menu_root.length == 1){
    levelurl = '/pages/ajax_request/menu/';
  }
  else{
    levelurl = '/pages/ajax_request/submenu/';
  } 
  /* strip unwanted characters from the input */
  $input.val($input.val().replace(/[^A-Za-z-_?&\d]/g, '' ));
  if (event.type == 'focusout' || event.which === 13){
    event.preventDefault();
    $.ajax({
      url: levelurl,
      type: 'POST',
      data: {id: menu_id, action: "modify_name"}, 
      dataType: 'json',
      success: function(data){
        if (data.status){
      /* add stuff once backend AJAX stuff is finished */               
        }
        else{      
          $('#infomodalTitle').html(data.title);
          $('#infomodalBody').html(data.message);
          $('#infomodalFooter').html('<a href="javascript:location.reload(true)"><button type="button" class="btn btn-success btn-xs">Reload Page</button></a>');
          $('#infomodal').modal('show');
        };
        /* apparently should stop event bubbling but doesnt. Probably not understanding the event bubbling issue properly */
        return false;
      },
      failure: function(data){
        /* display info modal error message */
        infotitle = "<font color='red'><b>Error</b></font>"
        $('#infomodalTitle').html(infotitle);
        $('#infomodalBody').html('<p>Server processing error</p>');
        $('#infomodalFooter').html('<button type="button" class="btn btn-success btn-xs" data-dismiss="modal">Dismiss</button>');           
        $('#infomodal').modal('show');          
      }
    });
  }
  else{
    var eltext = menu_root + $input.val() + '/';
    $(el).html(eltext);
  };
});
/* ******************** */

Answer 1

像这样更改代码：

var eventFired = false;

$(document).on('keyup focusout','.name_input',function(event){

  if( !eventFired ) { 

      eventFired = true;

      //Your code

      eventFired = false;

  }

});