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

Javascript multiple events bound to single function, causes multiple function execution

本文关键字：函数 执行 事件 绑定 Javascript 单个      更新时间：2023-09-26

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

我已经得到它大部分工作，但注意到一个小问题。我给函数绑定了3个事件;Keyup, focusout和keydown。我试图捕捉每个键，因为他们被按下(动态更新DOM中的另一个元素，以反映其类型的变化)，当用户点击远离输入，也当输入键被按下。点击并触发每个按键的效果很好，但是按回车键却给我带来了一个问题。我必须添加keydown事件来捕捉这个。似乎正在发生的事情是，所有三个事件都被触发(即我的AJAX POST被发送了三次)。无法解决这个问题。尝试了一些事情(即禁用事件冒泡)，但是我对JS很陌生，所以有点超出我的深度和解决这个问题。提前感谢张贴的任何答案。下面是我写的JS，可能不是最有效的，我相信我会及时学会如何使它更精简。

如何确保按下回车键时on函数运行一次?

提前感谢下面的代码。

/* 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);
  };
});
/* ******************** */

像这样修改代码:

var eventFired = false;
$(document).on('keyup focusout','.name_input',function(event){
  if( !eventFired ) { 
      eventFired = true;
      //Your code
      eventFired = false;
  }
});
相关文章：