matchMedia调用函数两次

我试图在移动设备上使用一个function（在这个例子中少于700px）和大型设备上的另一个function。 我以下列方式使用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以下，然后resize超过700px，则按钮首先闪烁，然后滑动，反之亦然。 我想要实现的目标是只在大屏幕上调用幻灯片，只在小屏幕上淡出。 任何帮助是极大的赞赏。

干杯!

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