Question

我正在使用移动过滤器。有几个按钮。点击每个按钮后收到课程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');
  }
};

Answer 1

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

＆＃13;

string lineTemplate = "<h{0}>{1}</h{0}>";
for (int tagCounter = 1; tagCounter < 7; tagCounter++)
{
    @Html.Raw(string.Format(lineTemplate, tagCounter, "Header "+ tagCounter));
}

＆＃13;

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

＆＃13;

这个演示可以显示原因：您必须在onclick

中将事件作为参数传递

＆＃13;

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

＆＃13;

如果你没有通过，它将是未定义的，如下所示：

＆＃13;

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

＆＃13;

参考错误 - Mozilla Firefox

1 个答案: