参考错误 - Mozilla Firefox答案

【问题标题】：Reference error - Mozilla Firefox参考错误 - Mozilla Firefox
【发布时间】：2018-02-08 08:07:07
【问题描述】：

我正在研究移动过滤器。有几个按钮。单击每个按钮后接收课程active-filter-btns。我做了所有事情，但在 Firefox 测试期间我收到错误ReferenceError: event is not defined。 Chrome 和 Safari 可以正常工作。任何想法为什么Mozilla会看到错误以及如何修复它？或者可能以不同的方式添加active class？

HTML：

 <div id="search-btns" class="filter-btns">
        <button id="filter-btn-all" class="filter-btn" onclick="Project.Search.selectCategory(this.id)">A - Z</button>
        <button id="filter-btn-provider" class="filter-btn" onclick="Project.Search.selectCategory(this.id)">Providers</button>
        <button id="filter-btn-jackpot" class="filter-btn" onclick="Project.Search.selectCategory(this.id)">Jackpot</button>
 </div>

JS：

Project.Search.selectCategory = function(event) {
  if(event.target.classList.contains('active-filter-btns')){
    this.showCategories();
  } else {
    switch(e) {
      case "filter-btn-all": 
        this.showAllGames();
        break;
      case "filter-btn-provider":
        this.showProviders();
        break;
      case "filter-btn-jackpot":
        this.showJackpotGames();
        break;
    }
  }

  if (!event.target.classList.contains('filter-btn'))
    return;

  event.target.classList.toggle('active-filter-btns');

  let links = document.querySelectorAll('.filter-btn'); 
  for (let i = 0; i < links.length; i++) {
    if (links[i] === event.target)
      continue;
    links[i].classList.remove('active-filter-btns');
  }
};

【问题讨论】：

标签： javascript html firefox browser navigation

【解决方案1】：

试试这个，在 Firefox 中，你必须传递事件对象。

Project.Search.selectCategory = function(event) {
   if(event.target.classList.contains('active-filter-btns')){
    this.showCategories();
 } else {
     switch(event.target.id) {
        case "filter-btn-all": 
            this.showAllGames();
            break;
        case "filter-btn-provider":
            this.showProviders();
            break;
        case "filter-btn-jackpot":
            this.showJackpotGames();
            break;
    }
}

if (!event.target.classList.contains('filter-btn')) {
    return;
}

event.target.classList.toggle('active-filter-btns');

let links = document.querySelectorAll('.filter-btn'); 
    for (let i = 0; i < links.length; i++) {
        if (links[i] === event.target) {
            continue;
        }
    links[i].classList.remove('active-filter-btns');
    }
};

<div id="search-btns" class="filter-btns">
        <button id="filter-btn-all" class="filter-btn" onclick="Project.Search.selectCategory(event)">A - Z</button>
        <button id="filter-btn-provider" class="filter-btn" onclick="Project.Search.selectCategory(event)">Providers</button>
        <button id="filter-btn-jackpot" class="filter-btn" onclick="Project.Search.selectCategory(event)">Jackpot</button>
 </div>

这个demo可以说明原因：你必须在onclick中将事件作为参数传递

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>

<body>
    <span id="counter" onclick="test(this.id,event)">1,234,567.15</span>
</body>
<script>
function test(event) {
    console.log(arguments[0]);
    console.log(arguments[1]);
}
</script>

</html>

如果你没有通过，它将是未定义的，像这样：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title><!-- 
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> -->
</head>

<body>
    <span id="counter" onclick="test(this.id)">1,234,567.15</span>
</body>
<script>
function test(event) {
    console.log(arguments[0]);
    console.log(event);//counter,because you pass id 'counter' ,you didn't pass event
}
</script>

</html>

【讨论】：