如何在JAVASCRIPT中临时删除eventListener

每当有人 Select 休息日(如星期六或星期日，它可能是一系列 checkout 日中的任何一天)时，我都想呈现一个错误.

我有超文本标记语言:

<div>
  <input type="date" id="date-input">
</div>

<br>

<div id="error-container">
</div>

Css:以下内容:

.d-error{
  background: orangered;
  color: white;
  padding: 4px 8px;
}

以下是该脚本:

'use strict';

const dateInput = document.getElementById('date-input');
const errorContainer = document.getElementById('error-container');
const closingDays = [0, 6];
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday','Friday', 'Saturday'];

const displayError = function ({ parentEl, message, position = 'prepend', durationSec = 0 }) {
  const errorElement = document.createElement('p');
  errorElement.classList.add('d-error');
  errorElement.textContent = message;
  parentEl[position](errorElement);

  if (durationSec) {
    setTimeout(() => {
      errorElement.remove();
    }, durationSec * 1000);
  }
};

const handleDateChange = function (event) {
  const selectedDay = new Date(event.currentTarget.value).getDay();

  if (closingDays.includes(selectedDay)) {
    displayError({
      parentEl: errorContainer,
      message: `We are closed on ${weekDays[selectedDay]}. Please select another day.`,
      durationSec: 5
    });

    event.currentTarget.value = '';
  }
};

dateInput.addEventListener('change', handleDateChange);

这是可行的，但错误会呈现两次.一次是由于用户改变，一次是由于以编程方式改变输入event.currentTarget.value = '';的值.那么，如何临时删除change事件侦听器并重新附加到它？或者其他方法来解决这个问题？

我试过了:

const handleDateChange = function(event) {
  ...

  event.currentTarget.removeEventListener('change', handleDateChange);
  event.currentTarget.value = '';  
  event.currentTarget.addEventListener('change', handleDateChange);

  ...
}

但这并没有解决问题.

最新情况:

首先，正如@Sebastian所指出的，以编程方式设置输入的值does not trigger a 100 event.所以一定有什么东西导致了事件的两次触发.

我非常抱歉没有在 firefox 以外的其他浏览器上测试.这个问题似乎只出现在Firefox中，就像在基于 chromium 的浏览器中一样，一切都像预期的那样工作(尽管在Firefox Android中也可以).所以，我猜这是Firefox中的某种错误，我一个人无法确认.请try 在不同的浏览器中运行代码片段.

'use strict';

const dateInput = document.getElementById('date-input');
const errorContainer = document.getElementById('error-container');
const closingDays = [0, 6];
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const displayError = function({
  parentEl,
  message,
  position = 'prepend',
  durationSec = 0
}) {
  const errorElement = document.createElement('p');
  errorElement.classList.add('d-error');
  errorElement.textContent = message;
  parentEl[position](errorElement);

  if (durationSec) {
    setTimeout(() => {
      errorElement.remove();
    }, durationSec * 1000);
  }
};

const handleDateChange = function(event) {
  const selectedDay = new Date(event.currentTarget.value).getDay();

  if (closingDays.includes(selectedDay)) {
    displayError({
      parentEl: errorContainer,
      message: `We are closed on ${weekDays[selectedDay]}. Please select another day.`,
      durationSec: 5
    });

    event.currentTarget.value = '';
  }
};

dateInput.addEventListener('change', handleDateChange);

.d-error {
  background: orangered;
  color: white;
  padding: 4px 8px;
}

<div>
  <input type="date" id="date-input">
</div>

<br>

<div id="error-container">
</div>