Question

有人在网上为我制作了这个代码，但它不起作用。它仍然通过其他2个代码，所以当你点击它时，它会通过第一个媒体查询代码，然后是第二个，有时也会是第三个。如何解决这个问题。这对我来说非常重要，因为我只有一个页面可以在整个页面中滚动。我们都知道移动用户是最高用户率。所以我真的希望有人可以为我解决这个问题并解释为什么这个版本无效。

非常感谢帮助。

$(document).ready(function() {
    function mediaSize() {
        var isTabletLandscape = window.matchMedia('(min-width: 768px) and (max-width: 1366px) and (orientation: landscape)');
        var isPhoneLandscape = window.matchMedia('(min-width: 320px) and (max-width: 812px) and (orientation: landscape)');
        var isPhonePortrait = window.matchMedia('(min-width: 320px) and (max-width: 812px) and (orientation: portrait)');
        if (isTabletLandscape.matches) {
            //code for tablet landscape
            $('#menu ul li #page3').on('click', function(){
                $('html,body').animate({scrollTop: $(".footer").offset().top  * 0.78}, 850);
            });
        } else if (isPhoneLandscape.matches) {
            //code for phone landscape
            $('#menu ul li #page3').on('click', function(){
                $('html,body').animate({scrollTop: $(".footer").offset().top  * 0.89}, 850);
            });
        } else if (isPhonePortrait.matches) {
            //code for phone portrait
            $('#menu ul li #page3').on('click', function(){
                $('html,body').animate({scrollTop: $(".footer").offset().top  * 0.69}, 850);
            });
        } else {
            //code for desktop
            $('#menu ul li #page3').on('click', function(){
                $('html,body').animate({scrollTop: $(".footer").offset().top  * 0.99}, 850);
            });
        }   
    }
    mediaSize();

    window.addEventListener('resize', mediaSize, false);
});

Answer 1

我认为您可以将$('#menu ul li #page3').off();用于停止侦听器

Answer 2

每当您致电mediaSize()时，它都会附加一个新的点击事件监听器。而这一个，因为它在调整窗口大小时不断触发，增加了一整个 boatload 的听众：

window.addEventListener('resize', mediaSize, false);

（您在评论中要求我进一步解释：resize事件会在用户调整窗口大小的整个过程中不断触发。因此，当用户拖动窗口边框时，浏览器会一遍又一遍地调用mediaSize，设置可能在同一元素上有数百个重复的事件处理程序。）

一种解决方案是在设置新的侦听器之前使用off()取消现有侦听器。但是，只更简单地连接单个侦听器并使其响应当前屏幕大小，而不是在屏幕大小发生变化时不断更换略有不同的侦听器：

$(document).ready(function() {

  // $('#menu ul li #page3') is unnecessarily complicated. IDs are unique, so all you need is #page3
  $('#page3').on('click', function() {
    // personally I'd check window.innerWidth here instead, but if this works, great:
    var isTabletLandscape = window.matchMedia('(min-width: 768px) and (max-width: 1366px) and (orientation: landscape)');
    var isPhoneLandscape = window.matchMedia('(min-width: 320px) and (max-width: 812px) and (orientation: landscape)');
    var isPhonePortrait = window.matchMedia('(min-width: 320px) and (max-width: 812px) and (orientation: portrait)');

    // you're doing the same thing in all of these conditions, except for the
    // number you're multiplying offset.top by, so let's just set 
    // that as a variable here:
    var multiple = 0.99;
    if (isTabletLandscape.matches) {
      multiple = 0.78;
    } else if (isPhoneLandscape.matches) {
      multiple = 0.89
    } else if (isPhonePortrait.matches) {
      multiple = 0.69;
    }

    // and now we only need to have one 'animate' block:
    $('html,body').animate({
      scrollTop: $(".footer").offset().top * multiple
    }, 850);
  })
});

这样你就不需要在窗口大小调整上重新绑定任何东西;该功能仅在需要时检查屏幕尺寸。

Javascript多媒体查询不起作用

2 个答案: