防止上一个事件侦听器在新单击时触发

问：

我有一个搜索按钮，它有一个点击事件，该事件运行一个函数，该函数包含下载按钮的addEventListerner。我希望用户能够多次点击搜索以找到正确的数据。但是，每次他们点击搜索时，都会为初始搜索按钮创建多个下载事件侦听器，当他们最终点击下载时，无论他们点击搜索多少次，他们都会下载。我希望他们只下载最新的搜索。

我尝试使用搜索按钮，但我希望他们能够根据需要多次搜索。我还尝试在他们单击删除事件侦听器然后重新分配它后克隆搜索按钮，但这不起作用。我也尝试删除然后立即将其添加回去，但我猜所有这些都不起作用，因为已经添加了下载点击的事件。我正在考虑将下载事件侦听器移动到搜索按钮单击之外，但我需要将这些值从读取数据函数发送到下载函数。{once: true}

searchBtn.addEventListener('click', getTransactionDetails);

const readData = async(data) => {
  // Headers
  let csvData = [
    ['Vehicle', 'SerialNumber', 'Address', 'Driver',
      'Transaction Date', 'Product Type', 'Quantity', 'Unit Price', 'Amount', 'Currency', 'Source Type', 'Filename'
    ]
  ];

  let transactionIdsAtIndex = ['Headers']; // Created to match the onclick event to the right transaction
  let coordinates = [];
  for (let i = 0; i < data.length; i++) {
    coordinates.push(data[i].location);
  }
  let getMediaFile = () => {
    return new Promise((resolve) => {
      api.call('Get', {
        typeName: 'MediaFile'
      }, resolve);
    }).catch(err => console.log(err))
  }
  const mediaFiles = await getMediaFile();
  api.call('GetAddresses', {
    coordinates: coordinates
  }, async addresses => {
    let count = 0;
    for (let j = 0; j < data.length; j++) {
      const gallons = data[j].volume / 3.785412534257983;
      let fileName = 'No Uploaded Image';
      for (let i = 0; i < mediaFiles.length; i++) {
        if (data[j].id === mediaFiles[i].name.split('.')[0]) {
          fileName = mediaFiles[i].name.split('.')[0];
          count++;
        }
      }
      // Values
      csvData.push(
        [
          data[j].description, // Vehicle
          data[j].serialNumber, // Serial Number of the device
          addresses[j].formattedAddress.replaceAll(',', ' '), // Address
          data[j].driverName, // Driver name from Fuel Transaction
          data[j].dateTime.slice(0, 16), // Formatted Date
          data[j].productType, // Product Type
          gallons.toFixed(3), // Quantity
          (data[j].cost / gallons).toFixed(3), // Unit Price
          data[j].cost.toFixed(3), // Amount 
          data[j].currencyCode, // Currency
          data[j].cardNumber, // Source Type
          fileName, // Receipt File Name
        ]
        .join(',')
      );
      transactionIdsAtIndex.push(data[j].id);
    }
    csvToTable(csvData.join('\n'), transactionIdsAtIndex);
    downloadBtn.addEventListener('click', () => downloadFilesAsZip(data, csvData.join('\n'), count));
  }, err => console.log(err));
}