Event.observe 'change' 事件未在 IE 中触发答案

【问题标题】：Event.observe 'change' events not being triggered in IEEvent.observe 'change' 事件未在 IE 中触发
【发布时间】：2010-02-28 15:56:11
【问题描述】：

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

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

这在 Firefox 中运行良好（当然），但在 IE 中没有任何反应（当然） - 我已经在谷歌上搜索了一段时间，但我还没有找到适合这个问题的解决方案。我读到存在问题，但我发现没有任何有用的方法可以规避问题并使其正常工作。

我真的在尽量避免使用内联事件触发器，因为它们很突兀，并且会使文档变得混乱且容易出错：

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

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

【问题讨论】：

标签： javascript internet-explorer events prototypejs onchange

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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;
}

【讨论】：