jQuery的防抖动调整大小

In this example here，我试图让H1标签的行为像一个可点击的按钮时，它的移动模式。当它返回到桌面模式时，我需要确保该按钮不再可点击。jQuery的防抖动调整大小

按钮时工作正常的页面最初加载在“移动模式”，以确保在移动模式下，该按钮将仅触发每一次点击。但是，在调整大小之后，它不会取消绑定点击，并且2.它似乎再次多次启动。

我知道我在做这一点的顺序或低效。欢迎任何其他更好的方法来做到这一点！

这里是我的代码：

<html> 
<head> 
<style type="text/css"> 
.mobile-mode { background: pink; } 
.mobile-mode h1 { background: yellow; padding: 10px; text-align: center; font-size: 16px; line-height: 20px; cursor: poi 
</style> 
<script type="text/javascript" src="/_jquery/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="/_jquery/jquery.debouncedresize.js"></script> 
<script type="text/javascript" src="/_jquery/jquery.throttledsize.js"></script> 
<script type="text/javascript"> 
$(window).bind("debounced", function() { 
     var viewportWidth = $(window).width(); 
     $('.v-width span').html(viewportWidth); 
     if (viewportWidth < 640) { 
       $('.device span').html('mobile'); 
       $('body').addClass('mobile-mode'); 
       $('h1').click(function() { 
         $('.results').append('<li>Hey!</li>'); 
       }); 
     } else { 
       $('.device span').html('desktop'); 
       $('body').removeClass('mobile-mode'); 
       $('h1').unbind(); 
     } 

}); 
</script> 
</head> 
<body> 

<div class="v-width">viewport width: <span></span></div> 

<div class="device">device: <span></span></div> 

<h1>Contextual Header Button</h1> 

<ol class="results"></ol> 

</body> 
</html>

来源

2013-02-19 Marc P

我是个白痴：我错误地调用的函数为“反跳”的时候，我应该把它叫做“debouncedresize”。

来源

2013-02-19 19:37:47

jQuery的防抖动调整大小

回答

相关问题