首页 > 解决方案 > 重新添加事件监听器

问题描述

我对 Javascript 还是比较缺乏经验

问题...是否可以重新添加事件侦听器?我有一个页面,我试图从浏览器窗口中滑出,但点击后又重新进入,要求(我认为?)我取消重新添加事件侦听器。我的整个设置可能是错误的。我希望我问的是正确的问题。

到目前为止,它的行为正常,直到需要重新添加事件侦听器。

想法?

window.onload = function() {
  var $toggle = document.getElementById('toggle');
  var $back_messages = document.getElementById('back_list');
  var swipeMotion = function() {
    var isOpen = $toggle.classList.contains('slide-in');

    $toggle.removeEventListener('click', swipeMotion);
    $toggle.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
  };

  $toggle.addEventListener('click', swipeMotion);

  $back_messages.addEventListener('click', function() {
    var isOpen = $toggle.classList.contains('slide-out');

    $toggle.setAttribute('class', isOpen ? 'slide-in' : 'slide-out');

  });

  $toggle.addEventListener('click', swipeMotion);
}
<main>
  <div class="slide-in" id="toggle">

    <div class="container-fluid">
      <div class="row">
        <header>
          <h1>Abberant Artist - Paula Bailey UI Designer</h1>
        </header>
      </div>
      </a>
      <div class="row incoming_message">
        <icon>hi an icon of the "person sending the thing</icon>
        <div>
          <p> short description in gray-ish tones of what its about, with ellipses on the end... </p>
        </div>
      </div>
      <div class="row incoming_message">
        <icon>About</icon>
        <div>
          <p> Hey, here's that info you wanted... </p>
        </div>
      </div>

<!-- ... -->

标签: javascripthtmljqueryaddeventlistenerremoveeventlistener

解决方案


推荐阅读