jQuery Click事件在每个窗口调整大小时触发更多次

Question

人!

这是我第一次来这里问问题,到目前为止,总是遇到问题时,我可以在这里找到一个好的答案.所以,首先,感谢这个惊人的社区!

现在让我们来解决问题:

我正在做一个响应式菜单,检查window.resize事件,当它符合最小浏览器宽度时,允许按钮的单击功能.如果浏览器宽度较大,则单击功能未绑定.我需要这样做,因为移动版本上的按钮相同的元素是桌面版本上的可视元素.

问题是,使用我现在的代码,当加载页面时,单击功能正常工作.但是,如果我调整浏览器大小并再次单击该元素,它会不止一次触发该状态,有时会留下不触发该功能的印象.而且,如果我再次调整浏览器的大小,它会触发点击功能,而不是上次点击时.真烦人

为了帮助理解正在发生的事情,我做了一个简单的例子.这是简单的代码(只是为了检查点击功能问题):

HTML:

<ul>
    <li><span class="sub-toggle">Testing 01</span></li>
    <li><span class="sub-toggle">Testing 02</span></li>
    <li><span class="sub-toggle">Testing 03</span></li>
</ul>

CSS:

.sub-toggle{
    display:block;
    padding: 20px;
}

.sub-toggle.active{
    background-color: #ffcc00;
    color: #fff;
}

Javascript(jQuery):

jQuery(function($){

    var i = 1;

    // check if browser size is compatible with click event
    onResize = function() {

        // if browser size is ok, do the click function
        if($(window).width() <= 480){

            // click function
            $('.sub-toggle').click(function(){

                alert('click');

                if($(this).hasClass('active')){
                    alert('active');
                    $(this).removeClass('active');
                } else {
                    $(this).addClass('active');
                }

            });     

        } else{
            // if browser size is greater than expected, unbind the click function
            $('.sub-toggle').removeClass('active').unbind('click');
        }

        // just checking how many times the resize function is triggered 
        console.log('resize: '+ i);
        i++;

    }

    $(document).ready(onResize);

    var timer;

    $(window).bind('resize', function(){
        timer && clearTimeout(timer);
        timer = setTimeout(onResize, 500);
    });

});

(编辑删除一些不必要的代码)

如果你想看到它在行动,我已经做了一个小提琴(尝试调整输出框架的大小,看它工作):http://jsfiddle.net/C7ppv/1/

也许我错过了一些非常愚蠢的东西,因为我对JavaScript没有太多的了解.但我想做的只是触发一次点击事件,即使多次调整大小.

我希望我能很好地解释我的问题.我已经搜索过,并没有找到解决这个问题的方法(或者我可能不太清楚要找什么).

任何帮助,将不胜感激!

Answer 1

click每次onResize调用方法并且窗口宽度小于或等于时,您的代码当前会绑定新事件480px.

在绑定新元素之前,只需取消绑定元素click上的所有现有事件.sub-toggle.

$('.sub-toggle').unbind('click').click(function() {
    ...
});

DEMO

Answer 2

该resize事件是在调整过程中多次触发,每次要绑定一个新的单击处理程序.我的建议:从resize处理程序外面只绑定一次,并在调整大小时设置一个标志,让click处理程序知道它是否应该执行某些操作.

然后,你甚至不会需要推迟的处理resize与setTimeout作为你在干什么.

DEMO

jQuery(function($){

    var i = 1;

    // flag to allow clicking
    var clickAllowed = true;

    // click function
    $('.sub-toggle').click(function(){
        if(clickAllowed) {
            alert('click');

            if($(this).hasClass('active')){
                alert('active');
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
        }
    }); 

    // check if browser size is compatible with click event
    onResize = function() {

        //if browser size is ok, do the click function
        if($(window).width() <= 480){
            clickAllowed = true;
        }
        else{
            // if browser size is greater than expected, disallow clicking
            clickAllowed = false;

        }

        // just checking how many times the resize function is triggered 
        console.log('resize: '+ i);
        i++;

    }

    $(document).ready(onResize);

    var timer;
    $(window).bind('resize', onResize);
});