参考错误-Mozilla Firefox

我正在处理移动滤镜。有几个按钮。单击每个按钮后接收类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');
  }
};

尝试一下，在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>

原因可以通过此演示显示：您必须将事件作为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>

相关内容

最新更新

热门标签：