Event.observe'更改'事件未在IE中触发

Question

我在IE中没有触发用于选择菜单更改的Prototype事件监听器。

Event.observe('use_billing', 'change', Checkout.getBillingData);

这在Firefox中运行良好（当然），但IE中没有任何事情发生（当然） - 我已经谷歌搜索了一段时间，但我还没有找到合适的解决方案来解决这个问题。我读到有问题，但我发现没有什么有用的可以绕过这个问题并让它发挥作用。

我真的试图避免使用内联事件触发器，因为它们是突兀的，并且使得容易出错的凌乱文档：

<select id='use_billing' onchange="Checkout.getBillingData();">....</select>

任何想法都会很棒 - 这是阻止该项目从测试阶段进入生产阶段的唯一因素。

Answer 1

这是IE的常见问题。在元素失去焦点之前，它不会触发change个事件。

要确认这确实是导致问题的原因，请尝试更改菜单，然后按Tab键将焦点移至另一个元素。如果您的回调正常，您就会知道没有其他问题。

之前我已经解决过这个问题，还要收听click或keydown等其他活动。您可以在回调中添加一个检查，以确保该值实际上与以前不同，以确保您不会处理事件的次数超过必要时间（因为其他浏览器会同时触发click和change如果他们点击一个新值，同时。）

Answer 2

我找到了原因 - 它不是焦点问题，事实证明我的表单元素的名称和id值相同 - 我更改了id值，一切正常。

Answer 3

我知道这是一个古老的话题，但我想分享一个上面的答案。在我的代码中，元素的名称和id是相同的，但这并不重要。

在被触发的函数中，事件参数从原型传入。要在Firefox中获取文本框（引发事件）的值，请使用eventArg.currentTarget.value

但在IE中你必须使用eventArg.srcElement.value

因此，为了使它能够在两种浏览器中运行，您必须使用...

var value = "";
var id = "";
if(eventArg.currentTarget){//FireFox
value = eventArg.currentTarget.value;
id = eventArg.currentTarget.id;
}
else{//IE
value = eventArg.srcElement.value;
id = eventArg.srcElement.id;
}