javascript - 每当调整浏览器大小时,On Click 事件都会触发多次
问题描述
我目前正在构建这个移动菜单,但我遇到了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)
解决方案
这是因为click
事件附加在mobileMenu.init();
函数中。click
在调整大小时,将附加一个新事件。你可以使用jQuery.off
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').off('click').on('click',
推荐阅读
- python - 在我自己实现的 kNN 算法中找到训练和测试错误
- python - 仅为一个应用程序修改标准类
- r - 无法配置 R 语言“需要 bzip2 库和标头”
- apache-spark - 如何将 Spark DataFrame 插入 Hive 内部表而不重复?
- java - 如何在最新的 Android Studio 3.2 中打开 Android 设备监视器
- powershell - 使用 Powershell 在文件中查找 CRLF
- java - Java ExecutorService 运行线程两次
- javascript - NodeJS 在下一个请求之前等待 HTTP 响应
- protractor - 查询未在量角器中完全返回数据
- html - 使下拉菜单与导航栏宽度相同