[英]On Click events fires multiple times whenever the browser is being resized
我现在正在制作这个移动菜单,我正面临着on('click')
事件的问题。 每当我尝试调整浏览器大小时, event
多次触发。 首先加载脚本和事件工作正常,但是当我开始调整浏览器大小时,事件会多次触发。
下面是我正在处理的代码示例。 是否有一种方法只有在调整大小后才会触发。 我尝试了一个临时解决方案,但它似乎没有生效。
(function($){
'use strict';
var mobileMenu = {
init : function() {
$('.region-primary-menu').addClass('primary-mobile-menu');
$('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click', function() {
$(this).toggleClass('active');
console.log('click');
})
},
clear : function() {
$('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
}
}
$(document).ready(function() {
if ($(window).width() < 1180) {
mobileMenu.init();
}
else {
mobileMenu.clear();
}
});
$(window).on('resize', function(e) {
var resizeTimer;
clearTimeout(resizeTimer);
var resizeTimer = setTimeout(function() {
if ($(window).width() < 1180) {
mobileMenu.init();
}
else {
mobileMenu.clear();
}
}, 100)
});
})(jQuery)
这是因为在mobileMenu.init();
附加了click
事件mobileMenu.init();
功能。 在调整大小时,会附加一个新的click
事件。 你可以使用jQuery.off
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').off('click').on('click',
因为在你的$(window).on('resize', function (e)...
你这样做:
if ($(window).width() < 1180) {
mobileMenu.init();
}
在mobileMenu.init()函数定义中,您附加了一个事件监听器,因此每当您调整1180大小以下的窗口时,它将附加更多的事件监听器。
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click' ...
无论如何,另一个答案告诉你如何删除事件监听器,这是你应该做的修复它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.