Question

我正在尝试在移动设备上使用某个功能（在此示例中少于700px），并在大型设备上使用另一个功能。我以下列方式使用matchMedia：

var mql = window.matchMedia("(min-width: 700px)");
mql.addListener(handleResize);
handleResize(mql);
function handleResize(mql) {
    if (mql.matches) {      
    $(".button").on("click", function(){
        $(".hidden").slideToggle();
    })                 
  } else {  
    $(".button").on("click", function(){
        $(".hidden").fadeToggle();
    })   
  }
}

首先，代码的行为与预期一致，当我调整窗口大小时会出现问题。例如，如果窗口首先加载到700px以下，然后调整大小超过700px，则按钮首先闪烁，然后滑动，反之亦然。我想要实现的目标是只在大屏幕上调用幻灯片，只在小屏幕上淡出。非常感谢任何帮助。

干杯！

Answer 1

问题在于，每次handleResize回调触发时，它都会向该按钮附加另一个点击事件。为防止附加大量事件，您必须先使用off()删除它。

这是一个完成你想要的例子：

var $hidden = $('.hidden');
var $btn = $('button');
var mql = window.matchMedia("(min-width: 700px)");

function bindSlide() {
  // Using `off()` is required in order not to end up attaching a lot of callbacks
  $btn.off("click.mql").on("click.mql", function() {
    $hidden.stop().slideToggle();
  }); 
}

function bindFade() {
  $btn.off("click.mql").on("click.mql", function() {
    $hidden.stop().fadeToggle();
  }); 
}

function handleScreen(mql) {
  if (mql.matches) {       
    bindSlide();
  } else {
    bindFade();
  }
}

// Handle media query 'change' event
mql.addListener(handleScreen);
handleScreen(mql);

请注意，所有浏览器都不支持window.matchMedia。对于本身不支持matchMedia的浏览器，您可以使用polyfill：https://github.com/paulirish/matchMedia.js

实例：http://jsfiddle.net/rhkLng9o

matchMedia调用函数两次

1 个答案: