停止后观察事件观察

Observing event after stopObserving

本文关键字：观察 事件      更新时间：2023-09-26

我正在处理一个弹出式日历，以便在表单字段中输入日期。这在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。

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

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
}
相关文章：