每当调整浏览器大小时，On Click 事件都会触发多次答案

【问题标题】：On Click events fires multiple times whenever the browser is being resized每当调整浏览器大小时，On Click 事件都会触发多次
【发布时间】：2018-11-07 02:12:52
【问题描述】：

我目前正在构建这个移动菜单，但我遇到了on('click') 事件的问题。每当我尝试调整浏览器大小时，event 就会多次触发。一开始加载脚本和事件工作正常，但是当我开始调整浏览器大小时，事件会触发多次。

下面是我正在处理的代码示例。有没有办法只在调整大小后触发一次。我尝试了一个临时解决方案，但似乎没有生效。

(function($){
    'use strict';

    var mobileMenu = {

        init : function() {


            $('.region-primary-menu').addClass('primary-mobile-menu');

            $('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');

            $('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click', function() {
                $(this).toggleClass('active');

                console.log('click');
            })
        },

        clear : function() {
            $('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
        }
    }

    $(document).ready(function() {


        if ($(window).width() < 1180) {
            mobileMenu.init();
        }

        else {
            mobileMenu.clear();
        }
    });



    $(window).on('resize', function(e) {

        var resizeTimer;

        clearTimeout(resizeTimer);
        var resizeTimer = setTimeout(function() {
            if ($(window).width() < 1180) {
                mobileMenu.init();
            }

            else {
                mobileMenu.clear();
            }
        }, 100)
    });



})(jQuery)

【问题讨论】：

jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?的可能重复

标签： javascript onclick resize

【解决方案1】：

这是因为click 事件附加在mobileMenu.init(); 函数中。在调整大小时，将附加一个新的clickevent。你可以使用jQuery.off

$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').off('click').on('click',

【讨论】：

【解决方案2】：

因为在你的$(window).on('resize', function (e)... 你这样做：

 if ($(window).width() < 1180) {
    mobileMenu.init();
 }

在 mobileMenu.init() 函数定义中，您附加了一个事件侦听器，因此每当您将窗口大小调整到 1180 以下时，它都会附加更多事件侦听器。

 $('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click' ...

无论如何，其他答案告诉您如何删除事件侦听器，这是您应该做的修复它。

【讨论】：