Problems with fireEvent methods on IE11

Question

I have a button, when simulating a click on this button using jquery/javascript/Ext JS5 in Firefox/Chrome browsers. This button fires it's event, but when doing same thing in IE11, the event does not fire? ANY CLUE?

Here's the way to click the button:

// jquery
$('.buttonId').click(); // works
// javascript 
document.getElementById('buttonId').click(); // works
// ExtJS 5
var ok = Ext.ComponentQuery.query('button[itemId=buttonId]')[0];
ok.fireEvent('click', ok); // works

But doesn't work for IE11

Lingster · Answer 1 · 2015-08-17T19:51:58.993

3

I would use:

ok.dispatchEvent("click")

instead of fireEvent, of course you will need to add some logic to detect which browser you are on, so that if IE < v11 then you could continue to use fireEvent().

Please see this from Microsoft about the deprecation of fireEvent and suggested replacement with dispatchEvent():

https://msdn.microsoft.com/en-us/library/ff986080(v=vs.85).aspx

edited Aug 17 '15 at 19:51

answered Aug 17 '15 at 17:31

Lingster

977
10
21

1

If you are not sure, this should be a comment, not an answer. If you are going to tell him he needs more logic, then provide it. You need to provide answers with more explanation. See [How to answer page](http://stackoverflow.com/help/how-to-answer) for help in improving your answer. – Madness Aug 17 '15 at 17:36
Hi Madness, thanks for the comment, I've provided link to justify my answer accordingly! – Lingster Aug 17 '15 at 19:52
Thanks so much @Lingster! – Madness Aug 17 '15 at 20:00

Simon Hoss · Answer 2 · 2015-04-24T14:00:45.740

1

This is a bug. Use this override and it should work!

Example Fiddle: https://fiddle.sencha.com/#fiddle/ls4

Ext.define('EXTJS-13775', {
    override: 'Ext.dom.Element'
}, function(Element) {
    var eventMap = Element.prototype.eventMap;

    eventMap.click = 'click';
    eventMap.mousedown = 'mousedown';
    eventMap.mouseup = 'mouseup';
    eventMap.mousemove = 'mousemove';
    eventMap.dblclick = 'dblclick';
    eventMap.mouseleave = 'mouseleave';
    eventMap.mouseenter = 'mouseenter';
});

edited Apr 24 '15 at 14:00

answered Apr 23 '15 at 17:39

Simon Hoss

562
1
3
7

just add it anywhere in your code. This is a override. – Simon Hoss Apr 24 '15 at 05:27
I created a fiddle to show you how it works. Tested with IE 11.0.9600.17691 – Simon Hoss Apr 24 '15 at 14:01
I'm testing this from the console, would it still work? – V Kid Apr 24 '15 at 14:55
from the console? What do you mean? – Simon Hoss Apr 24 '15 at 14:59
It is work for me. Can you explain Why the event does not fire on IE 11? is it Extjs lib issue? – Sudarshan Dec 15 '15 at 09:59

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

This works on all browsers. assume I have a select input named (myDropDown)

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    myDropDown.dispatchEvent(evt);
}
else
    myDropDown.fireEvent("onchange");

Also, you can refer to fireEvent in IE

edited May 23 '17 at 10:28

Community

1
1

answered Feb 04 '16 at 22:19

FLICKER

6,439
4
45
75

Problems with fireEvent methods on IE11

3 Answers3