0

在这里的这个例子中，我试图让 H1 标签在它处于移动模式时表现得像一个可点击的按钮。当它返回桌面模式时，我需要确保该按钮不再可点击。

当页面最初以“移动模式”加载时，该按钮可以正常工作，以确保在移动模式下，该按钮仅在每次单击时触发。但是，在调整大小后，它 1. 没有取消绑定点击，并且 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>
4

1 回答 1

0

我是个白痴：我错误地将函数称为“debounced”，而我应该将其称为“debouncedresize”。

于 2013-02-19T19:37:47.547 回答