matchMedia 调用函数两次

Question

我正在尝试在移动设备上使用一个功能（在此示例中小于 700 像素），并在大型设备上使用另一个功能。我通过以下方式使用 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();
    })   
  }
}

起初，代码按预期运行，当我调整 window 大小时出现问题。例如，如果 window 首先加载到 700 像素以下，然后调整到超过 700 像素，则按钮首先触发淡入淡出，然后滑动，反之亦然。我当然想实现的是只调用大屏幕上的幻灯片，只调用小屏幕上的淡入淡出。非常感谢任何帮助。

干杯！

Answer 1

问题是每次触发 handleResize 回调时，它都会将另一个 click 事件附加到按钮。为防止附加大量事件，您必须先使用 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 调用函数两次

matchMedia calls functions twice

javascript

jquery

matchmedia