javascript - 在特定条件下手动调用事件处理程序时 IE 出错

Question

前言

• 请注意，我不是在寻找代码解决方案，而是在寻找可能发生这种情况的原因。
• 错误出现在 IE(已测试 7 和 8)中，但不会出现在 Firefox、Chrome、Safari 中。

描述

手动调用分配给 onclick 的函数时, IE 抛出 Error: Object doesn't support this action如果满足以下所有条件:

1. 您直接通过元素的 on[event] 调用该方法属性(property)。
2. 您不使用 .call()或 .apply() .
3. 你传递一个参数(任何参数，甚至是 undefined )。
4. 您尝试将返回值分配给变量。

违反其中任何一条规则，调用成功。

函数本身似乎与它无关。空函数给出相同的结果。

代码

var elem = document.getElementById('test');  // simple div element.
var result;               // store result returned.

function test_func(){};   // function declaration.
                          // function expression behaves identically.

elem.onclick = test_func; // assign test_func to element's onclick.

// DIRECT CALL
test_func();                 // works
test_func( true );           // works
result = test_func();        // works
result = test_func( true );  // works

// DIRECT CALL, CHANGING THE CONTEXT TO THE ELEMENT
test_func.call( elem );                  // works
test_func.call( elem, true );            // works
result = test_func.call( elem );         // works
result = test_func.call( elem, true );   // works ******** (surprising)

// CALL VIA ELEMENT, USING .call() METHOD, CHANGING THE CONTEXT TO THE ELEMENT
elem.onclick.call( elem );                  // works
elem.onclick.call( elem, true );            // works
result = elem.onclick.call( elem );         // works
result = elem.onclick.call( elem, true );   // works ******** ( very surprising)

// CALL VIA ELEMENT
elem.onclick();                 // works
elem.onclick( true );           // works
result = elem.onclick();        // works
result = elem.onclick( true );  // Error: Object doesn't support this action

总结

同样，我不需要代码解决方案。相反，我很好奇是否有人了解为什么 IE 以这种方式实现。

非常感谢。

---

编辑:澄清一件事，实际功能似乎没有任何区别。命名参数，不命名参数，返回参数，返回字面值，返回undefined，这些都没有效果。

这可能是因为该函数似乎从未真正被调用过。正如我在下面的评论中指出的那样，导致此调用的代码运行良好，因此它也不是解析问题。但是当解释器到达这个时，它会看到:

Variable + AssignmentOperator + DOMElement + EventHandler + CallOperator + Argument

...并抛出错误。我所做的任何操作似乎都没有任何区别。有效删除其中任何一个，错误就会消失。

如果我在它的中间添加一个变量来存储处理程序，然后从它工作的变量中触发它。

var temp = elem.onclick;
result = temp( true );    // works

...但这并不奇怪，因为它实际上与上面的第四个版本相同。

Answer 1

至于“为什么”以这种方式实现，外界可能没有答案。一个很好的例子是，前 IE 开发人员，innerHTML 的发明者，面临 problems。与 innerHTML 本身。

问为什么也没有必要，因为

1. 您不经常使用显式参数调用事件处理程序
2. 您可以解决该问题(如您在问题中所述)

还有一点要注意，你的类比太具体了。该问题不仅限于赋值表达式，您可以使用其他类型的表达式重现它:

undefined === elem.onclick( true )
typeof elem.onclick( true )
elem.onclick( true ) - 1
alert(elem.onclick( true ))