I have problem with mouseEvent in angular 4 on IE11. I am using angular 4, angular-cli.
When I activate this line of code:
let newEvent = new MouseEvent('mouseleave', {bubbles: true});
IE is throwing such exception in console:
TypeError: Object does not support this operation. at MenuItemComponent.prototype.onClick (./main.bundle.js:821:13) at Anonymous function (Function code:37:9) at handleEvent (./vendor.bundle.js:12039:87) at callWithDebugContext (./vendor.bundle.js:13247:9) at debugHandleEvent (./vendor.bundle.js:12835:5) at dispatchEvent (./vendor.bundle.js:9014:5) at Anonymous function (./vendor.bundle.js:9604:31) at Anonymous function (./vendor.bundle.js:19253:9) at ZoneDelegate.prototype.invokeTask (./polyfills.bundle.js:10732:13) at onInvokeTask (./vendor.bundle.js:4357:21) at ZoneDelegate.prototype.invokeTask (./polyfills.bundle.js:10732:13) at Zone.prototype.runTask (./polyfills.bundle.js:10501:21) at invoke (./polyfills.bundle.js:10796:21)
I uncommented everything in my polyfils.ts and rebuilded project, I have tried IE and ES6 shims...
I can not find anything similar in Google, and I think this is some silly issue - cloud somebody please point me to solution?
You can trick for IE by:
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
...
@ViewChild('fileInput') public fileInput: ElementRef;
...
// Trigger button click event
let event;
if (document.createEvent){
// Only for IE and Firefox
event = document.createEvent('MouseEvent');
event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
} else {
// For Chrome
event = new MouseEvent('click', {bubbles: false});
}
this.button.nativeElement.dispatchEvent(event);
Try in html file:
<div #sample>You need to click me</div>
in component.js file:
@ViewChild('sample') sampleEle: ElementRef;
and the use the click event as in the js as:
this.sampleEle.nativeElement.click();