Question

我正在为Facebook开发游戏。我正在使用PHP和FBJS。我正在使用addEventListener（）将事件附加到两个按钮。每个按钮都有自己的事件处理程序，这是一个js函数。第一个事件处理程序（loadNewCargo（））被调用没有问题。但是第二个事件处理程序（discardExistingCargo（））会在调用页面时刷新页面。我见过的例子对多个元素使用单个事件处理函数。我正在为每个元素创建一个处理程序。这是非法的吗？这是代码（'load-new-submit'和'discard-existing-submit'是对话框上两个按钮的ID）：

function loadCargo() {
  var actionPrompt = document.getElementById('action-prompt');
  actionPrompt.setTextValue('Loading cargo...');

  var ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  ajax.ondone = function(data) {
//debugger;
    ajax.responseType = Ajax.FBML;
    ajax.ondone = function(fbjsData) {
//debugger;
      if(data.loadableCargo.length == 0) {
        moveTrainManual();
      } else {
        var dialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Minimize', 'Pass');

        var dlgBtnNew = document.getElementById('load-new-submit');
        dlgBtnNew.cityId = data.loadableCargo.city_id;
        dlgBtnNew.trainId = data.loadableCargo.train_id;
        dlgBtnNew.addEventListener('click', loadNewCargo);
/**/
        var dlgBtnDiscard = document.getElementById('discard-existing-submit');
        dlgBtnDiscard.cityId = data.loadableCargo.city_id;
        dlgBtnDiscard.trainId = data.loadableCargo.train_id;
        dlgBtnDiscard.addEventListener('click', discardExistingCargo);
/**/
        dialog.onconfirm = function() {
          // Submit the form if it exists, then hide the dialog.
          dialog.hide();
          actionPrompt = document.getElementById('action-prompt');
          actionPrompt.setInnerXHTML('<span><div id="action-text">'+
            'The "Load cargo" dialog has been minimized'+
            '</div>'+
            '<div id="action-end">'+
            '<form action="" method="POST">'+
            '<input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" />'+
            '</form>'+
            '</div></span>');
          actionButton = document.getElementById('next-phase');
          actionButton.setValue('Maximize');
          actionButton.addEventListener('click', loadCargoEventHandler);
        };
        dialog.oncancel = function() {
          moveTrainManual();
        }
      }
    }
    ajax.post(baseURL + '/turn/load-cargo-dialog-fbjs', data);
  }
  ajax.post(baseURL + '/turn/load-cargo');
}

function loadCargoEventHandler(evt) {
  if(evt.type == 'click') {
    var dialog = new Dialog().showChoice('Load Cargo', fbjs_load_cargo_select, 'Minimize', 'Pass');
    dialog.onconfirm = function() {
      // Submit the form if it exists, then hide the dialog.
      dialog.hide();
      var actionPrompt = document.getElementById('action-prompt');
      actionPrompt.setInnerXHTML('<span><div id="action-text">'+
        'The "Load cargo" dialog has been minimized'+
        '</div>'+
        '<div id="action-end">'+
        '<form action="" method="POST">'+
        '<input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" />'+
        '</form>'+
        '</div></span>');
      var actionButton = document.getElementById('next-phase');
      actionButton.setValue('Maximize');
      actionButton.addEventListener('click', loadCargoEventHandler);
    };
    dialog.oncancel = function() {
      moveTrainManual();
    }
  }
}

function loadNewCargo(evt) {
  //new Dialog().showMessage('loadNewCargo', 'city id='+cityId+', train id='+trainId);
//debugger;
  cityId = evt.target.cityId;
  trainId = evt.target.trainId;

  ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  param = { 'load-cargo-submit': "Load new goods", 'city-id': cityId, 'train-id': trainId };
  ajax.ondone = function(data) {
    openCargoHolds = data.openCargoHolds;
    cargoHoldsUsed = 0;
    ajax.responseType = Ajax.FBML;
    param = { 'openCargoHolds': data.openCargoHolds, 'cityGoods': data.cityGoods, 'trainId': data.trainId };
    ajax.ondone = function(fbjsData) {
//debugger;
      var dialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Load cargo', 'Cancel');
      dialog.onconfirm = function() {
        var goods = [];
        var goodsIds = [];
        numGoods = document.getElementById('goods-count').getValue();

        for(var i = 0; i < numGoods; i++) {
          j = i + 1;
          goods[i] = document.getElementById('goods-' + j).getValue();
          goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
        }
        var trainId = document.getElementById('train-id').getValue();
        param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
        ajax.responseType = Ajax.JSON;
        ajax.ondone = function(data) {
          loadCargo();
        }
        ajax.post(baseURL + '/turn/do-load-cargo-new', param);
        //dialog.hide();
      };
      dialog.oncancel = function() {
        loadCargo();
      }
    }
    ajax.post(baseURL + '/turn/load-cargo-new-dialog-fbjs', param);
  }
  ajax.post(baseURL + '/turn/load-cargo-select', param);
}

function discardExistingCargo(evt) {
  //new Dialog().showMessage('loadNewCargo', 'city id='+cityId+', train id='+trainId);

  cityId = evt.target.cityId;
  trainId = evt.target.trainId;
/**/
  ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  param = { 'load-cargo-submit': "Discard existing goods", 'city-id': cityId, 'train-id': trainId };
  ajax.ondone = function(data) {
    ajax.responseType = Ajax.FBML;
    param = { 'openCargoHolds': data.openCargoHolds, 'trainGoods': data.trainGoods, 'trainId': data.trainId };
    ajax.ondone = function(fbjsData) {
      var dialog = new Dialog().showChoice('Discard Cargo', fbjsData, 'Discard cargo', 'Cancel');
      dialog.onconfirm = function() {
        var goods = [];
        var goodsIds = [];
        numGoods = document.getElementById('goods-count').getValue();
        for(var i = 0; i < numGoods; i++) {
          j = i + 1;
          goods[i] = document.getElementById('goods-' + j).getValue();
          goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
        }
        var trainId = document.getElementById('train-id').getValue();
        param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
        ajax.responseType = Ajax.JSON;
        ajax.ondone = function(data) {
          loadCargo();
        }
        ajax.post(baseURL + '/turn/do-load-cargo-discard', param);
        //dialog.hide();
      };
      dialog.oncancel = function() {
        loadCargo();
      }
    }
    ajax.post(baseURL + '/turn/load-cargo-discard-dialog-fbjs', param);
  }
  ajax.post(baseURL + '/turn/load-cargo-select', param);
/**/
}

感谢您提供任何帮助。

Answer 1

你可以归还假;来自discardExistingCargo函数，以避免默认的提交操作 - 这导致页面刷新。

Answer 2

问题解决了：按钮的输入类型是“提交”，因此页面刷新（doh！）

addEventListener（）问题/奇怪的行为

2 个答案: