参考错误-Mozilla Firefox

Question

I'm working on mobile filters. 我正在研究移动过滤器。 There are a few buttons. 有几个按钮。 After click every button receive class active-filter-btns . 单击每个按钮后，接收class active-filter-btns 。 I did everything but during Firefox tests I got error ReferenceError: event is not defined . 我做了一切，但是在Firefox测试期间出现错误ReferenceError: event is not defined 。 Chrome and Safari work correctly. Chrome和Safari可以正常运行。 Any ideas why Mozilla see error and how to fix it? 关于Mozilla为什么会看到错误以及如何解决错误的任何想法？ Or maybe different way to add active class ? 还是添加active class其他方法？

HTML: 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: 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');
  }
};

Answer 1

try this,in firefox,you have to pass the event object. 尝试此操作，在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>

the reason can be showed by this demo:you have to pass the event as parameter in the onclick 此演示可以说明原因：您必须在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>

if you didn't pass,it will be undefined,like this: 如果没有通过，它将是不确定的，如下所示：

 <!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>

参考错误-Mozilla Firefox

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-08 08:14:45

参考错误-Mozilla Firefox

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-08 08:14:45

解决方案1
1 已采纳 2018-02-08 08:14:45