JS Prototype中的Observer事件 - 同时发生两个事件

时间:2011-08-18 07:36:03

标签: javascript events prototypejs observer-pattern

我有一个输入框,它接受一个在函数opConfig.reloadPrice()中验证的数字。我将2个观察者设置为相同的元素,在“更改”时,当我在框外单击或使用选项卡时执行代码 - 如果已进行更改。在'按键'上它会检查是否按下了返回键然后执行代码 AND 它还会触发'更改'观察者!!所以在这种情况下,函数opConfig.reloadPrice()会被执行两次(最后我得到两个相同的警告框)。 我现在的代码:

<input type="text" value="" name="options[1]" id="options_1" onkeypress="return disableEnterKey(event)">

Event.observe($('options_1'), 'change', function(e){ 
   opConfig.reloadPrice(); 
}); 
Event.observe($('options_1'),'keypress', function(e){ 
  if (e.keyCode == Event.KEY_RETURN)  
    opConfig.reloadPrice(); 
});

我尝试了几种不同的解决方案(我尝试了'模糊'事件,将一个观察者放在另一个......) 我正在寻找类似于这个的解决方案 jQuery-Two events at the same time

万分感谢

编辑-解决:
感谢 katspaugh ,我解决了这个问题。很少有东西对我来说不清楚,其中之一是:'keypress'事件在'change'事件之前被观察到,这就是为什么你可以在一个观察者中设置变量并在以后检查它们的原因另一个(这也是为什么我花了一段时间来理解katspaughs代码:-))。

无论如何,我改变了一些适合我的代码:

var enterPressed = 0;  

Event.observe($('options_1'), 'change', function(){ 
  if (enterPressed !== 1) {    
    opConfig.reloadPrice();  
  }
  enterPressed = 0;
  });

Event.observe($('options_1'), 'keypress', function(e){  
if ((e.keyCode == Event.KEY_RETURN) || (e.keyCode == Event.KEY_TAB)) {
  enterPressed = 1;
  opConfig.reloadPrice();   
}
else 
  enterPressed = 0;  
}); 

干杯,
jazkat

1 个答案:

答案 0 :(得分:1)

将输入字段的当前值保存在较高范围的变量(up-value)中。

如果值在其中一个事件中发生更改,请触发处理程序并更新upvalue:

var oldVal;

$('options_1').observe(
  'change', function () {
      var val = this.value;
      if (oldVal !== val) {
          oldVal = val;
          opConfig.reloadPrice();
      }
  }
).observe(
    'keypress', function(e) { 
        oldVal = this.value;
        if (e.keyCode == Event.KEY_RETURN) {
            opConfig.reloadPrice();
        }
    }
);

此外,您最好删除HTML中的内联侦听器(并且永远再次添加它们):

<input type="text" name="options[1]" id="options_1" />

Demo