代码之家 › 专栏 › 技术社区 › Italik

参考错误-Mozilla Firefox

navigation browser firefox html javascript

Italik · 技术社区 · 7 年前

我正在研究手机过滤器。有几个按钮。单击每个按钮后接收类 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');
  }
};

1 回复 | 直到 7 年前

xianshenglu 7 年前

试试这个,在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>