IE9 raising error when simulating click event

in FuncUnit » Syn • 1 year ago

In IE9, I am testing a click event that I have bound via a controller.

The click event fires fine when I trigger it via my mouse in the browser.

But when I test via FuncUnit (browser mode, haven't tried selenium mode) I get a JS error:

SCRIPT65535: Invalid calling object

I've looked into the error, and it looks like it occurs in the jQuery core (1.6.1):

taken from jQuery.Event.prototype, line 3103:

// if preventDefault exists run it on the original event
if ( e.preventDefault ) {
e.preventDefault();
// otherwise set the returnValue property of the original event to false (IE)
} else {
e.returnValue = false;
}

It's actually line 3 above, the e.preventDefault() statement that is causing the error.

Which is weird, because IE9 is not supposed to even have that function. It should be undefined and fall through to the e.returnValue = false bit.

When I debug I can see that e.preventDefault() is being set to an empty object somehow:

if ( e.preventDefault ) {
console.log(JSON.stringify(e.preventDefault());
e.preventDefault();

//outputs {}

Where in the code that would be occurring, I have no idea.

Has anyone else ever experienced this? Could FuncUnit / Syn somehow causing this?

Cheers,
-adam

Replies(6)

Brian_Mos..

Re: IE9 raising error when simulating click event

1 year ago

Isn't this a duplicate of the same question I just responded to? Can you try to create the smallest possible breaking test case and submit it. I'll take a look and fix it.

Thanks,

Brian

asgeo1

Re: IE9 raising error when simulating click event

1 year ago

Unfortunately, no. In this case there is a Javascript error that occurs. (the other issue I reported was about an incomplete behavior)

If I trap that Javascript error the problem goes away:

try{
// if preventDefault exists run it on the original event
if ( e.preventDefault ) {
e.preventDefault();
// otherwise set the returnValue property of the original event to false (IE)
} else {
e.returnValue = false;
}
}
catch(error){
e.returnValue = false;
}

That's my current work around - but of course changing the jQuery core is not the best solution - I would like to find the underlying problem and fix that.

I just started the day job, so I'll see if I can get a working test case done tonight.

Cheers,

-adam

asgeo1

Re: IE9 raising error when simulating click event

1 year ago

Hi Brian,

Here is a working example of the bug, stripped down to the minimum code:

//testclickbug.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="steal/steal.js?testclickbug.js"></script>
</head>
<body>
<div id="container"><a id="mylink" href="#">My Link</a></div>
</body>
</html>

// testclickbug.js

steal.plugins('jquery/controller')
.then(function(){
$.Controller.extend('Test', {}, {});
$(document).ready(function(){
$('#container').delegate("a","click", function (e) { e.preventDefault(); })
.test();
});
});

//funcunit_example.js:

module("/testclickbug.html",{
setup : function(){
S.open('/testclickbug.html');
}
});
test("simulate click - this will fail in IE9", function(){
S('#mylink').exists().click();
});

You should be able to load testclickbug.html in any browser, even IE9 and there will be no Javascript error. The single link on the page will do nothing because of the call to preventDefault().

But when you run the exact same code via FuncUnit, in IE9 it crashes with a Javascript error (as described in my original post)

It's obviously something to do with the call to .delegate() and how the controller class applies it's own delegates.

Before you ask - why is there even a delegate in my code outside of the controller? That is setup by the jsTree jQuery plugin. In theory it shouldn't be a problem though I wouldn't have thought.

What I can do now (since I understand the cause of the problem) is just undelegate() that event prior to binding my controller to the element, and that will also fix my problem.

So it's probably not an important issue to fix considering I can do that.

Cheers,
-adam

asgeo1

Re: IE9 raising error when simulating click event

1 year ago

Actually, I think this is a more serious bug than I first thought. I'm getting this error in a few other places in my app now when FuncUnit testing in IE9 - not all related to jsTree.

I think that in synthetic.js, where the preventDefault function is defined (around line 456), I suspect that that may be the cause of this bug:

var preventDefault = event.preventDefault,
prevents = autoPrevent ? -1 : 0;
//automatically prevents the default behavior for this event
//this is to protect agianst nasty browser freezing bug in safari
if ( autoPrevent ) {
bind(element, type, function( ev ) {
ev.preventDefault();
unbind(this, type, arguments.callee);
});
}
event.preventDefault = function() {
prevents++;
if (++prevents > 0 ) {
preventDefault.apply(this, []);
}
};

In IE9, the global event object does not have a preventDefault property. I set a break point on line 1 above, and I could see that there was no preventDefault property on this event object too.

What is then happening is the undefined preventDefault property is being saved as a reference and then executed as if it was a function on line 14.

I'm pretty sure that is the source of the "Invalid calling object" error I'm experiencing since you can't call "apply" on a non-function.

So I don't quite get what is wrong with the event object that is being passed in then - I assume that it is supposed to have a preventDefault property like jQuery.Event does.

Cheers,
-adam

EDIT: uh, my debugging skills in IE9 are not the best. What I wrote above is wrong - but I still think this code snippet is the cause of the problem - because it is the only place in JavascriptMVC where I can see a preventDefault property being defined.

I'll keep trying to work it out, but if anyone has an idea please let me know. -adam

asgeo1

Re: IE9 raising error when simulating click event

1 year ago

OK, I've worked it out now.

As I thought, this is the buggy bit of code in synthetic.js:

event.preventDefault = function() {
prevents++;
if (++prevents > 0 ) {
preventDefault.apply(this, []);
}
};

'this' actually refers to the global object, not the event. At least in IE9 it does.

If I change it to 'event' then that fixes the bug for me. (and doesn't appear to break anything else that I can tell)