matchMedia调用函数两次

matchMedia calls functions twice

本文关键字：两次 调用 函数 matchMedia      更新时间：2023-09-26

我正在尝试在移动设备上使用一个函数（本例中小于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以上，则按钮会先触发淡入淡出，然后滑动，反之亦然。我想要实现的是在大屏幕上只调用幻灯片，在小屏幕上只使用渐变。非常感谢您的帮助。

干杯！

问题是，每次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

相关文章：