Question

我有一些用JavaScript编写的代码，它可以在除firefox之外的所有浏览器中使用。错误是：

ReferenceError：未定义事件

我了解到这是在说我需要在函数中调用它之前定义事件，但是我不知道如何分配它，并且对为什么它在除firefox之外的所有浏览器中都能正常工作感到困惑。

const headings = document.querySelectorAll('#myTable th:not(:first-of-type)');

const tbody = document.querySelector('#myTable tbody');

const sortRows = (order, i) => {
let rows = document.querySelectorAll('#myTable tbody tr');

if (i === 0) {
if (order === 'asc') {
  return Array.from(rows).sort();
} else {
  return Array.from(rows).sort().reverse();
}
} else {

return Array.from(rows).sort((a, b) => {

    let s = 0;
    let aval = a.cells[i].textContent;
    let bval = b.cells[i].textContent;

    if(event.target ==document.getElementById('acid-level')){
        var cval = a.cells[i - 1].textContent;
        var dval = b.cells[i - 1 ].textContent;
      }
    if(event.target ==document.getElementById('alk-level')){
        var cval = a.cells[i + 1].textContent;
        var dval = b.cells[i +1 ].textContent;
    }

    if(aval === bval){
       s = 0;
    }else if (aval === 'High') {
        s = 1;
    } else if (bval === 'High') {
        s = -1;           
    } else if (aval === 'Medium') {
        s = 1;
    } else if (bval === 'Medium') {
        s = -1;
    } else if (aval === 'Low') {
        s = 1;
    } else if (bval === 'Low') {
        s = -1;  
    }

    if(cval === dval){
       //s = 0;
    }else if (cval === 'High') {
        s = -1;
    } else if (dval === 'High') {
        s = 1;           
    } else if (cval === 'Medium') {
        s = -1;
    } else if (dval === 'Medium') {
        s = 1;
    } else if (cval === 'Low') {
        s = -1;
    } else if (dval === 'Low') {
        s = 1;  
    }

    if (order === 'desc') {
      s *= -1;
     }
     return s;
    });
  }
}

for (let heading of headings) {
heading.addEventListener('click', (event) => {
let fragment = document.createDocumentFragment();
let elem = event.target;
let order = 'asc';
if (elem.classList.contains('asc')) {
  order = 'desc';
  elem.classList.remove('asc');
  elem.classList.add('desc');

} else {
  elem.classList.remove('desc');
  elem.classList.add('asc');        

}

let sorted = sortRows(order, elem.cellIndex);
for (let s of sorted) { 
  fragment.appendChild(s);
}
while (tbody.firstChild) {
  tbody.removeChild(tbody.firstChild);
}   
  tbody.appendChild(fragment);

  });
}

该代码分别将表列从高到低和从低到高排序，并且可以正常工作，但仍然无法在Firefox中正常工作。

    <table id="myTable">
  <thead>
    <tr>
    <th >Food/Beverage </th> 
    <th id="alk-level">Alkalizing Level</th>
    <th id="acid-level">Acidic Level</th>
    </tr>
  </thead>
 <tbody>
  <tr>
    <td>Ale (Dark)</td>
    <td></td>
    <td>High</td>
  </tr>
  <tr>
   <td>Ale (Pale)</td>
   <td></td>
   <td>High</td>
  </tr>
   <tr>
   <td>Alkaline, Ionized Water</td>
   <td>High</td>
    <td></td>
   </tr>
  <tr>
     <td>Almond Butter</td>
     <td>Medium</td>
     <td></td>
  </tr>
  <tr>
    <td>Almond Milk (unsweetened)</td>
    <td>Low</td>
   <td></td>
  </tr><tr>
    <td>Almonds</td>
    <td>Medium</td>
    <td></td>
  </tr>
   <tr>
    <td>Amaranth Seeds</td>
    <td>Low</td>
    <td></td>
  </tr>
  <tr>
    <td>Apple Cider Vinegar</td>
    <td></td>
    <td>Low</td>
  </tr>
   <tr>
     <td>Apple Juice</td>
     <td></td>
    <td>High</td>
  </tr><tr>
    <td>Apple Pie</td>
    <td></td>
    <td>High</td>
  </tr><tr>
   <td>Apples</td>
   <td></td>
   <td>Medium</td>
 </tr><tr>
    <td>Apricots</td>
    <td></td>
    <td>Medium</td>
 </tr><tr>
     <td>Apricots (Dried)</td>
     <td></td>
     <td>High</td>
 </tr><tr>
     <td>Artichokes</td>
     <td>Medium</td>
     <td></td>
 </tr><tr>
     <td>Asparagus</td>
     <td>High</td>
     <td></td>
 </tr><tr>
    <td>Aspartame</td>
    <td></td>
   <td>High</td>
</tr><tr>
    <td>Avacado Oil</td>
    <td>Low</td>
    <td></td>
  </tr><tr>
    <td>Avocado</td>
    <td>High</td>
    <td></td>
  </tr><tr>
     <td>Bacon</td>
      <td></td>
    <td>High</td>
  </tr><tr>
    <td>Bagles</td>
    <td></td>
    <td>High</td>
  </tr>
  </tbody>
  </table>

Answer 1

尝试以下操作：将event从调用它的事件处理程序传递到sortRows()函数。

像这样更新函数定义...

const sortRows = (order, i, event) => {

以及您这样称呼的方式...

heading.addEventListener('click', (event) => {
    // some code here, etc.
    let sorted = sortRows(order, elem.cellIndex, event);

之所以可以在Chrome浏览器中使用而不是在FireFox中工作，可能是由于Chrome对边缘情况的出色处理。

仅在Firefox中出现Javascript参考错误

1 个答案: