JavaScript重新添加event listener实现页面滑入滑出切换问题

事件监听器可以重新添加，但你的需求不需要用到这个逻辑 #

你现有代码无法正常运行的核心问题如下：

• 你在swipeMotion函数执行时直接移除了$toggle的点击事件监听器，但没有写重新绑定的逻辑，所以第一次点击后，后续再点击$toggle不会触发任何响应
• 代码末尾重复绑定了两次swipeMotion监听器到$toggle上，属于冗余逻辑，会导致第一次点击时函数重复执行两次
• 用setAttribute('class')修改类名会直接覆盖元素上所有已有的类，若后续需要给元素加其他类会出问题，更推荐用classList的相关方法操作类名

优化实现代码 #

你要的点击切换滑入滑出效果，直接绑定一次事件监听、每次点击切换类名即可，完全不需要反复移除/添加监听器：

window.onload = function() {
  var $toggle = document.getElementById('toggle');
  var $back_messages = document.getElementById('back_list');

  // 抽离公共切换逻辑，两个点击场景都可以复用
  function toggleSlideState() {
    var isSlideIn = $toggle.classList.contains('slide-in');
    if (isSlideIn) {
      $toggle.classList.replace('slide-in', 'slide-out');
    } else {
      $toggle.classList.replace('slide-out', 'slide-in');
    }
  }

  // 各元素绑定一次监听即可
  $toggle.addEventListener('click', toggleSlideState);
  $back_messages.addEventListener('click', toggleSlideState);
}

如果需要兼容不支持classList.replace的老旧浏览器，可以把替换逻辑改成：

// 替换类名的兼容写法
$toggle.classList.remove(isSlideIn ? 'slide-in' : 'slide-out');
$toggle.classList.add(isSlideIn ? 'slide-out' : 'slide-in');

内容的提问来源于stack exchange，提问作者siren_dev