javascript - 如何检测用户所做的更改与以编程方式进行的更改之间的差异？

Question

我有一个被触发两次的 onChange 事件处理程序；一次用于用户所做的更改，第二次用于由于原始用户的更改而以编程方式进行的更改。对于前者，该事件应该只触发一次。您如何区分用户所做的更改和脚本所做的更改？

Answer 1

如果您只是用 更改值el.value = x，change则不会触发事件。例如，这不会将任何内容记录到控制台：

var el = document.getElementById('el')
el.onchange = function(){
    console.log('changed');
};
el.value = 'asasassasa';

所以，如果你看到它被触发了两次，那是因为：

• 您正在使用 手动触发它el.onchange()。在这种情况下，只需删除 this 调用。

或者：

• 事件处理程序多次绑定到元素。你必须找到发生这种情况的地方。

Answer 2

捕获此类问题并有时解决它们的一种好方法是始终检查旧值与 onchange 处理程序中的当前值。

function onChange_handler(e){
  if(this.old_value==this.value){
        return; // no change detected - check why was it called twice.
  }
  this.old_value=this.value;
  // the real change handling code
}