Addeventlistener不像预期的那样工作
addeventlistener doesn't work as expected
本文关键字:工作 Addeventlistener 更新时间:2023-09-26
我已经把代码放在底部了,谢谢!
我写了一个javascript日历,但是当我使用addEventListener时,它会导致一些问题,这里是代码,谢谢你的帮助!
document.addEventListener('DOMContentLoaded', function(){
var today = new Date(),
year = today.getFullYear(),
month = today.getMonth(),
monthTag =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
day = today.getDate();
function Calendar(selector) {
this.el = document.getElementById(selector);
this.draw();
}
Calendar.prototype.draw = function() {
var that = this,
reset = document.getElementById('reset'),
pre = document.getElementsByClassName('pre-button'),
next = document.getElementsByClassName('next-button');
pre[0].addEventListener('click', function(){that.preMonth(); });
next[0].addEventListener('click', function(){that.nextMonth(); });
reset.addEventListener('click', function(){that.reset(); });
this.drawHeader();
this.drawDays();
};
Calendar.prototype.drawHeader = function() {
var headDay = document.getElementsByClassName('head-day'),
headMonth = document.getElementsByClassName('head-month');
headDay[0].innerHTML = day;
headMonth[0].innerHTML = monthTag[month] +" - " + year;
console.log('hello')
};
Calendar.prototype.drawDays = function() {
var days = document.getElementsByTagName('td'),
startDay = new Date(year, month, 1).getDay(),
nDays = new Date(year, month + 1, 0).getDate(),
n = startDay;
for(var k = 0; k <42; k++) {
days[k].innerHTML = '';
days[k].className = '';
}
for(var i = 1; i <= nDays ; i++) {
days[n].innerHTML = i;
n++;
}
for(var j = 0; j < 42; j++) {
if(days[j].innerHTML === ""){
days[j].className = "disabled";
a = j;
}
if((j === day + a)&&((month===today.getMonth())&&(year===today.getFullYear()))){
days[j].className = "today";
}
}
};
Calendar.prototype.preMonth = function() {
if(month < 1){
month = 11;
year = year - 1;
}else{
month = month - 1;
}
current = false;
this.drawHeader();
this.drawDays();
};
Calendar.prototype.nextMonth = function() {
if(month >= 11){
month = 0;
year = year + 1;
}else{
month = month + 1;
}
this.draw();
};
Calendar.prototype.reset = function() {
month = today.getMonth();
year = today.getFullYear();
this.draw();
}
var calendar = new Calendar('#calendar');
}, false);
如您所见,preMonth()
工作正常,但如果我将{this.drawHeaders(); this.drawdays}
更改为{this.draw();};
, nextMonth()
工作错误
这是codependency上的代码;当你点击2次以上的右键;日期显示不符合预期!http://codepen.io/puny-d/pen/eygIH
每次点击上一页/下一页按钮都会添加新的事件处理程序。事件处理程序调用draw
,它再次绑定事件处理程序。因此,在第二次点击下一个按钮之后,您将执行两次month = month + 1
。
解决方案:在创建日历时只绑定一次事件处理程序
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作