如何将事件分配给可能根据屏幕大小更改的元素

Question

背景：我使用一段JQuery根据其ID为元素分配事件。该事件从屏幕左侧滑动菜单。

问题：当屏幕大小变为<710px时，我将隐藏原始元素并显示一个新元素（这只是一个不同的图标）。但是我希望这个新元素能够触发同一个事件。

我应该一个接一个地将事件分配给两个元素，还是可以将它组合成一个事件？

下面是我的HTML JS和CSS的示例请注意除非测试窗口在711PX以上，否则触发器将无法工作

 window.onload = function(){

   document.getElementById('megga-nav-toggle').addEventListener('click', function () {
       var documentBody = $('#megga-global-menu');
       documentBody.toggleClass('is-active');
       if (documentBody.hasClass('hide-megga')) {
           documentBody.removeClass('hide-megga');
          
           return;
       }
       documentBody.addClass('hide-megga');
       
   });

   document.getElementById("megga-global-menu").addEventListener("mouseleave", menuHide);


  };
   function menuHide() {
       document.getElementById("megga-global-menu").classList.add('hide-megga');
   }

   #megga-global-menu {
       background: red ;
       position: fixed;
       top: 50px;
       bottom: 0;
       left:0px;
       width: 200px;
       z-index: 1000000;
       transition: ease all .6s;
   }
   #megga-global-menu.hide-megga {
       left: -200px;
       transition: ease all .6s;
   }
    #megga-nav-toggle {
       display: inline-block;
       z-index:999998;
       font-size: 30px;
       color: #000;
       cursor: pointer;
   }

@media screen and (min-width: 710px) {
    #megga-navmobile-toggle {
        display:none;
    }
}

@media screen and (max-width: 710px) {
    #megga-nav-toggle {
        display:none;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="megga-nav-toggle">FULL SCREEN</span><Bn/><Br/>

<span id="megga-navmobile-toggle">MOBILE SCREEN</span>




<div id="megga-global-menu" class="">
My slide out menu goes here!
</div>

Answer 1

我不确定我理解你的问题，但是如果你想根据屏幕尺寸显示不同的图标，为什么不把它们放在同一个元素中并用@media显示想要的图标？

@media screen and (min-width: 710px) {
  #megga-navmobile-toggle-icon { display: none; }
}
@media screen and (max-width: 710px) {
  #megga-nav-toggle-icon { display: none; }
}

你的HTML应该是：

<div id="megga-nav-toggle">
  <span id="megga-nav-toggle-icon">FULL SCREEN</span><Bn/><Br/>
  <span id="megga-navmobile-toggle-icon">MOBILE SCREEN</span>
</div>