matchMedia调用函数两次

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(); 
    }) 
    } 
} 

首先，代码的行为如预期，当调整窗口大小时会出现问题。例如，如果窗口首先加载到700像素以下，然后调整到700像素以上，则该按钮会先消失，然后再放开，反之亦然。我想要实现的目标只是在大屏幕上调用幻灯片，并且只能在小屏幕上褪色。任何帮助是极大的赞赏。

干杯！

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本身你可以使用填充工具的浏览器：https://github.com/paulirish/matchMedia.js

活生生的例子：http://jsfiddle.net/rhkLng9o