problems clicking <a href="javascript:void(0)" onclick=...> on IE10

[EricTiger]

When I use IE10 and dojo 1.9, I find out that

1. After I open a dialog and close it, the document.activeElement is null. But on IE8 and FF, it is not null.
2. If on IE10, the document.activeElement is not null, and I click any widgets to do some JS, the code "var mdh = on(targetWindow.document, 'mousedown, touchstart', function(evt){...});" which is in focus.js will be executed repeatedly. But on IE8 and FF, it won't.

[bill]

Does this manifest itself as an actual bug?

The first one sounds like focus isn't getting set correctly, and I will need a test case to reproduce.

The second one sounds like IE10 is working correctly, and the other browsers are failing. But again I will need a test case.

[EricTiger]

I am not sure whether it is an actual bug. These two issues are found out when I code. Since the behavior of Dojo on different browsers is different, I open this ticket. About the second issue, after you click any widgets, you must make sure the document.activeElement is not null. And then you can click another widgets to reproduce it. Thank you.

[EricTiger]

Do you have any comments?

[bill]

As I said above, I will need an actual test case. Please attach a test case using the "attach file" button. It should be as small as possible to still reproduce the problem, almost always a single HTML file that we can load in the browser (i.e. not PHP, JSP, etc.).

Then, give exact instructions on how to reproduce the problem.

Alternately, you can give instructions on how to reproduce the problem with an existing test case (in the tests/ directory).

[EricTiger]

Test Case

[EricTiger]

Attachment (dojo._xichen.html) added by ticket reporter.

[EricTiger]

I have uploaded the test case. Since in our project, we don't use the official dojo 1.9 you provide, we cannot reproduce the issues I describe before completely. But in this test case (you can use official dojo 1.9), we can see some similar results with the second issue. The steps are

1. Please use IE 10 to open this html file.
2. Please open console window to see log.
3. Please click the link.
4. The web will be no response and in console window you can see many error messages.

We cannot reproduce this issue on IE 8, Firefox.

About the first issue, document.activeElement is different between Firefox, IE8 and Chrome. You also can use this test case to check.

[bill]

I tried your test file IE10/Win8, against dojo 1.9.0, but I don't see any errors in the console. It merely shows the dialog, hides the dialog, and prints an alert (where activeElement is set).

[EricTiger]

Have you tried Chrome and Firefox to check the issue 1? The activeElement is different between them. I just try again and I still could see the error. Please use IE10/Win7 to try. If it still doen't occur, please add more rows which containt link to the grid.

[Auskalia]

Test result of the html on windows7 x64 IE10.

[Auskalia]

Hi, I added newest test result with picture and html file. Obviously, dojo makes the IE10 stack overflow. It happens on Windows7 x64 IE10. Thx~

Replying to bill:

I tried your test file IE10/Win8, against dojo 1.9.0, but I don't see any errors in the console. It merely shows the dialog, hides the dialog, and prints an alert (where activeElement is set).

[bill]

Ah, right. Yes, I reproduce it on IE10 Win7. It's the old IE bug where ​event handlers react to events they shouldn't. In particular in dijit/focus.js line 99:

var mdh = on(targetWindow.document, 'mousedown, touchstart', function(evt){
   ...

That callback is getting triggered by a synthetically emitted attrmodified-focus event.

The workaround is to stop using <a href="javascript:void" onclick=...> Just use an <span onclick=...>. Actually, you shouldn't be using <a> tags anyway except for actual links.

See ​http://dojo-toolkit.33424.n3.nabble.com/Weird-TabContainer-Tabs-Title-behavior-IE9-Dojo-1-8-1-td3992531.html for a detailed discussion.

It doesn't seem practical to workaround this IE bug in dojo because it would require modifying every single event listener, or at least all the ones that catch bubbled events. I suppose the best way to handle it in dojo would be to add guard code in on.js itself.