Note that there are some explanatory texts on larger screens.

plurals
  1. POError in IE when manually calling event handler, given certain conditions
    primarykey
    data
    text
    <h2>Preface</h2> <ul> <li>Please note, I'm not looking for a code solution, but rather insight into why this may occur.</li> <li>The error occurs in IE (tested 7 &amp; 8), but not Firefox, Chrome, Safari.</li> </ul> <h2>Description</h2> <p>When manually calling a function assigned to <code>onclick</code>, IE with throw a <code>Error: Object doesn't support this action</code> if <em>all of the following conditions</em> are met:</p> <ol> <li>You call the method directly via the element's <code>on[event]</code> property.</li> <li>You do not use <code>.call()</code> or <code>.apply()</code>.</li> <li>You pass an argument (any argument, even <code>undefined</code>).</li> <li>You attempt to assign the return value to a variable.</li> </ol> <p>Violate any one of those rules, and the call succeeds.</p> <p>The function itself appears to have nothing to do with it. An empty function gives the same result.</p> <h2>Code</h2> <pre><code>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 </code></pre> <h2>Summary</h2> <p>Again, I don't need a code solution. Rather I'm curious if anyone has insight into why IE is implemented this way.</p> <p>Many thanks.</p> <hr> <p><strong>EDIT:</strong> To clarify one thing, nothing with the actual function seems to make any difference. Naming parameters, not naming them, returning the argument, returning a literal value, returning undefined, all of these have no effect.</p> <p>This is likely because the function seems to never actually get called. As I noted in a comment below, the code leading up to this call runs fine, so it isn't a parsing issue either. But when the interpreter gets to this one, it sees:</p> <blockquote> <p>Variable + AssignmentOperator + DOMElement + EventHandler + CallOperator + Argument</p> </blockquote> <p>...and throws the Error. No manipulation I do seems to make any difference. A valid removal of any one of those, and the Error disappears.</p> <p>If I place add a variable to the middle of it that stores the handler, then fire it from the variable it works.</p> <pre><code>var temp = elem.onclick; result = temp( true ); // works </code></pre> <p>...but this shouldn't be much of a surprise, since it is effectively the same as the fourth version above.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload