0
In this example here 나는 모바일 모드 일 때 클릭 가능한 버튼처럼 동작하도록 H1 태그를 얻으려고합니다. 바탕 화면 모드로 돌아 가면 버튼을 더 이상 클릭 할 수 없도록해야합니다.jQuery Debounce Resize
페이지가 처음 "모바일 모드"로로드 될 때 버튼이 제대로 작동하여 모바일 모드에서 버튼이 매번 클릭 만 발생한다는 것을 확인하십시오. 그러나 크기를 조정 한 후에는 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>