События при нажатии запускаются несколько раз при изменении размера браузера - PullRequest
Новая
       10

События при нажатии запускаются несколько раз при изменении размера браузера

0 голосов
/ 07 ноября 2018

У меня есть мобильное меню, которое я сейчас создаю, и у меня возникла проблема с 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)

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Потому что в вашем $(window).on('resize', function (e)... вы делаете это: 

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

А в определении функции mobileMenu.init () вы присоединяете прослушиватель событий, поэтому всякий раз, когда вы изменяете размер окна ниже 1180, он присоединяет больше прослушивателей событий. 

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

В любом случае другой ответ говорит вам, как удалить прослушиватель событий, что вы должны сделать, чтобы исправить это.

0 голосов
/ 07 ноября 2018

Это связано с тем, что click событие присоединено в функции mobileMenu.init();. При изменении размера добавляется новое событие click. Вы можете использовать jQuery.off 

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