CODEWITHSUNDEEP
javascriptjqueryinternet-explorerextjs
V Kid
V Kid

Reputation: 117

Problems with fireEvent methods on IE11

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

Upvotes: 1

Views: 7698

Answers (3)

FLICKER
FLICKER

Reputation: 6693

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

Upvotes: 0

Lingster
Lingster

Reputation: 1087

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

Upvotes: 3

Simon Hoss
Simon Hoss

Reputation: 562

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';
});

Upvotes: 1

Related Questions