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