Javascript 在旧版 Windows Firefox 上失败

Question

这个问题已经有答案了:

ReferenceError: event is not defined error in Firefox (2 个回答)

已关闭 3 年前。

我构建了一个订单查询表单，其中包含一些 Javascript 驱动的功能。我已经让这个表单适用于我可以测试的每个浏览器，其中包括 Win 10 和一些 Mac 操作系统。我的客户仍在使用 Windows XP，他说这两个功能不起作用:

1. 使用单选按钮选项提高商品价格

2. 收集完所有内容后，在页面底部计算小计各种商品的价格和数量。

在我告诉他我无法支持 XP 之前，我想知道我的脚本中是否有某些内容在 Windows XP 上的 Firefox 中会失败(希望有解决方法)。我在网上查了方法文档，没看到。这是我正在使用的各种脚本。这些是纯Javascript，只是为了看看我是否能做到。

每次商品数量发生变化时，都会触发小计重新计算。

/************************************************
 *              Wide Option
 ************************************************/

function subtractWideOption() { // below traverse DOM from radio button to price
  var priceSpan = event.target.parentNode.parentNode.nextElementSibling.firstElementChild;
  if (priceSpan.className.indexOf("wider") !== -1) { // test if option is already set
    var currentPrice = parseInt(priceSpan.innerHTML.slice(1), 10); // remove $ sign and parse
    var newPrice = currentPrice - 25; // remove cost for option
    priceSpan.innerHTML = "$" + newPrice; // add $ sign
    priceSpan.className = priceSpan.className.replace(" wider",""); // remove option class
    priceSpan.className += " std"; // add standard class
  } else {
    return;
  }
}

function addWideOption() {
  var priceSpan = event.target.parentNode.parentNode.nextElementSibling.firstElementChild;
  if (priceSpan.className.indexOf("std") !== -1) {
    var currentPrice = parseInt(priceSpan.innerHTML.slice(1), 10);
    var newPrice = currentPrice + 25;
    priceSpan.innerHTML = "$" + newPrice;
    priceSpan.className = priceSpan.className.replace(" std","");
    priceSpan.className += " wider";
  } else {
    return;
  }
}



/************************************************
 *              Order Subtotal
 ************************************************/

var qtyBtns = document.getElementsByClassName("qty"); // collect all qty inputs
var subTotal = document.getElementById("oi_subt");

function recalcSubtotal() {
  var subT = 0;
  for (var i = 0; i < qtyBtns.length; i++) { // below traverse DOM from input to price
    var priceHTML = qtyBtns[i].parentNode.previousElementSibling.firstElementChild.innerHTML;
    if (priceHTML == "TBD") { // one custom item with TBD price is ignored
      price = "0"
    } else {
      priceHTML = priceHTML.replace(",",""); // remove comma from price
      var price = parseInt(priceHTML.slice(1), 10); // remove $ sign and parse
    };
    var qty = parseInt(qtyBtns[i].value, 10);
    subT += (price * qty); // add up all items ordered
    subTotal.innerHTML = "$" + subT;
  }
}

Answer 1

您正在像这样绑定(bind)事件处理程序:

var stepupBtns = document.getElementsByClassName("steppingUp");

for (var i = 0; i < stepupBtns.length; i++) {
  stepupBtns[i].onclick = function(){
    var valueOf = this.previousElementSibling.value;
    valueOf = ++valueOf;
    this.previousElementSibling.value = valueOf;
    event.preventDefault();
    recalcSubtotal();
  }
}

在这些函数中，请注意 event 变量未在任何地方定义。事件变量应该在您的函数定义中传递:

  stepupBtns[i].onclick = function(event){

您应该对所有处理程序执行此操作。

更多信息可以在这里找到:https://stackoverflow.com/a/20522980