Question

我遇到问题，我需要在浏览器宽度小于 769px 时运行一个函数。

我使用$(window).resize();检测浏览器何时变宽。

当我将浏览器的大小调整为例如750px时，该函数会生成一个新的事件堆栈，我的意思是，如果现在我单击按钮，每个事件运行两次，如果我更改了浏览器宽度再说一遍，700px，现在每个都执行三次。对于浏览器宽度的每次更改，只要它小于769px，就会有一个新的事件监听器＆＃34;堆叠＆＃34;。

我只能更新事件而不允许在调整浏览器大小时创建新事件吗？

要重新创建问题，请按以下步骤操作：

这里是一个link的JSFiddle，可以重现我的问题。

加载页面
点击按钮查看初始行为
更改最小浏览器的大小769px
点击另一个按钮查看新行为。
将浏览器的大小调整为较小的宽度769px
点击按钮查看行为，该活动现在运行三次

代码：

var App = function() {

    var tempo, body;
    var Init = function() {
        body = $('body');
        $(window).resize(function() {
            clearTimeout(tempo);
            tempo = setTimeout(showonlyone, 500);
        });

        showonlyone();
    };

    var showonlyone = function() {
        console.log('Executing now !!!');
        var mobileClass = "small-device";
        var desktopClass = 'desktop-device';
        var windowWidth = getWindowWidth();

        if (windowWidth < 769) {
            body.addClass(mobileClass);
            body.removeClass(desktopClass);

            $('a[data-navtrigger]')
                .click(
                    function(e) {
                        e.stopPropagation();
                        var triggerTag = $(this);
                        var triggerName = $(this).attr(
                            "data-navtrigger");
                        var activo = true;
                        var activeClase = 'activoo';

                        console.log('triggerName: ' + triggerName);

                        $('a[data-navtrigger]')
                            .each(
                                function(index) {
                                    if ($(this).attr(
                                            "data-navtrigger") == triggerName) {
                                        if (!$(this).hasClass(
                                                activeClase)) {
                                            $(this)
                                                .addClass(
                                                    activeClase);
                                        } else {
                                            activo = false;
                                            $(this)
                                                .removeClass(
                                                    activeClase);
                                        }
                                    } else {
                                        $(this).removeClass(
                                            activeClase);
                                    }
                                });

                        $('[data-navtarget]')
                            .each(
                                function(index) {
                                    console
                                        .log('triggerName Dentro: ' + triggerName);
                                    if ($(this).attr(
                                            "data-navtarget") == triggerName && activo) {
                                        $(this).slideDown(250);
                                    } else {
                                        $(this).slideUp(250);
                                    }
                                });
                    });
        } else if (windowWidth > 768) {
            body.removeClass(mobileClass);
            body.addClass(desktopClass);
            $('a[data-navtrigger]').unbind('click');
        }
    };

    var getWindowWidth = function() {
        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    };

    return {
        init: function() {
            Init();
        }
    };

}();

$(document).ready(App.init);

Answer 1

如果使用CSS Media Queries控制这些类怎么办？然后，您可以添加指定类的行为。

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

问题出现是因为事件处理程序已堆叠。举个例子：

$compile('<my-directive param="param"></my-directive>')($scope);

http://jsfiddle.net/8f95m8cx/

您必须初始化处理程序一次或将其关闭。

$('<span>').appendTo($('body')).html("click me")
  .click(function() { console.log(1); })
  .click(function() { console.log(2); })
  .click(function() { console.log(3); }) // prints 1 2 3

http://jsfiddle.net/8f95m8cx/1/

如何在调整大小时阻止函数创建新的事件窗口堆栈

2 个答案: