stopObserving 之后的观察事件答案

【问题标题】：Observing event after stopObservingstopObserving 之后的观察事件
【发布时间】：2023-03-08 13:53:01
【问题描述】：

我正在使用弹出式日历在表单字段中输入日期。这适用于 Firefox、Chrome 和 Safari，但不适用于 IE8。包含的代码是出现问题的最少代码。

所需的功能是：

单击图像，创建并显示日历。
再次单击，删除日历。

会发生什么：

IE8 仅在第一次显示和删除 div $('calendari') ；之后什么都没有发生，也没有显示错误。

HTML

<form id="form1" name="form1" method="post" action="">
  <div class="refCal">
    <input type="text" name="data" id="data" />
    <img class="unCal" src="gestio/imatges/16/calendari.png" width="16" height="16" />
  </div>
</form>

CSS

.refCal {position:relative; display:inline;} /*Container for calendar*/
.unCal {cursor:pointer;}
.calendari {position:absolute;width:200px;height:200px;border:1px solid #999;z-index:1000;background-color:#FFC;}

JavaScript（使用原型 1.7.2）

window.onload = iniciar;

function iniciar() {
  $$('div.unCal').each(function(el) {
    Event.observe(el,'click',obreCalendari);
  });
}

function obreCalendari(evt) {
  calendar = new Calendari(evt);
}

var Calendari = Class.create({
  initialize: function(evt) {
    obj = Event.element(evt);
    Event.stopObserving(obj,'click',obreCalendari);
    Event.observe(obj, 'click', function() {
      $$('.calendari').invoke('remove');
        Event.observe(obj,'click',obreCalendari);
      });
    cnt = new Element('div',{'class':'calendari','id':'calendari'}); // the calendar
    obj.up('div').insert(cnt); // inserts calendar in container
  }
})

感谢您的帮助。 请不要向我推荐 JQuery。

【问题讨论】：

标签： javascript internet-explorer-8 prototypejs

【解决方案1】：

好吧，上帝帮助那些自助的人。我找到了问题，因此找到了解决方案。似乎 Internet Explorer 对事件处理程序的分配非常挑剔。在关闭日历的功能中，我忘记了上一个事件的 Event.stopObserving 点击：

Event.observe(obj, 'click', function() {
  Event.stopObserving(obj,'click'); // <--- Added line
  $$('.calendari').invoke('remove');
    Event.observe(obj,'click',obreCalendari);
  });
  cnt = new Element('div',{'class':'calendari','id':'calendari'}); // the calendar
  obj.up('div').insert(cnt); // inserts calendar in container
}

【讨论】：