4

人们！

这是我第一次来这里问东西，到目前为止，当我遇到问题时，我都能在这里找到一个很好的答案。所以，首先，感谢这个了不起的社区！

现在让我们来解决问题：

我正在做一个响应式菜单来检查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);
    });

});

（编辑删除一些不必要的代码）

如果您想看到它的实际效果，我制作了一个 Fiddle（尝试调整输出框架的大小以使其正常工作）：http: //jsfiddle.net/C7ppv/1/

也许我错过了一些非常愚蠢的东西，因为我没有大量的 JavaScript 知识。但我想做的只是触发一次点击事件，即使多次调整大小。

我希望我能很好地解释我的问题。我已经搜索并没有找到解决这个问题的方法（或者我可能只是不太清楚要寻找什么）。

任何帮助，将不胜感激！

4

3 回答 3

7

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

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

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

演示

于 2013-03-08T23:36:25.490 回答
5

该resize事件在调整大小期间被触发多次，并且每次您绑定一个新的点击处理程序时。我的建议：从调整大小处理程序外部只绑定一次，并在调整大小时设置一个标志，让点击处理程序知道它是否应该做某事。

然后你甚至不需要像你正在做的那样推迟处理resizewith 。setTimeout

演示

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);
});
于 2013-03-08T23:45:51.957 回答
2

$('.sub-toggle').click(function(){...}移出 onResize 事件处理程序并移入单击if($(window).width() <= 480){...}处理程序。

于 2013-03-08T23:43:30.610 回答