每當調整瀏覽器大小時，On Click事件都會多次觸發

Question

我現在正在制作這個移動菜單，我正面臨着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)

Answer 1

這是因為在mobileMenu.init();附加了click事件mobileMenu.init(); 功能。 在調整大小時，會附加一個新的click事件。 你可以使用jQuery.off

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

Answer 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' ...

無論如何，另一個答案告訴你如何刪除事件監聽器，這是你應該做的修復它。