CODEWITHSUNDEEP
javascripteventsinternet-explorer-9dispatchevent
Muthu
Muthu

Reputation: 487

Javascript dispatchEvent click is not working in IE9 and IE10

I'm trying to simulate mouse events like click, mouseover etc on app build in ExtJs. I'm using below code to simulate click,

function triggerEvent(element, eventName)
{
    if (document.createEvent)
    {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent(eventName, true, true);

        return element.dispatchEvent(evt);
    }
}

var btn = document.getElementById("loginButton");

triggerEvent(btn, "click");

This works fine on chrome and firefox but never works on IE9 and IE10. If I use btn.fireEvent('onlclick') then it works fine in IE9 (not checked in IE10). document.createEvent is supported in IE9 & IE10 but I'm not sure why my code is not working.

Upvotes: 3

Views: 22517

Answers (2)

Mr. Raymond Kenneth Petry
Mr. Raymond Kenneth Petry

Reputation: 11

Without reading your question I can tell you fireEvent works even on IE11 for e.g. WMP.fireEvent("onmouseup") where WMP is [my] windowsmediaplayer object element....

And worse trouble, if(attachEvent) throws an error instead of taking the false out...sometimes.

Upvotes: -3

Marco Pappalardo
Marco Pappalardo

Reputation: 955

I have had the same issue with custom events some time ago and solved by using the code found in this other question: Custom events in IE without using libraries

Actually you don't need to use all the code, they are 3 function to use as wrapper for browser compatibility.

But I also suggest you to use the .click method which would solve your problem more easily (at least for normal click) http://www.w3schools.com/jsref/met_html_click.asp

so just do 

document.getElementById("loginButton").click();

I am pasting here the code by sergey gospodarets from the other question, which could be useful.

    function triggerEvent(el,eventName){
        var event;
        if(document.createEvent){
            event = document.createEvent('HTMLEvents');
            event.initEvent(eventName,true,true);
        }else if(document.createEventObject){// IE < 9
            event = document.createEventObject();
            event.eventType = eventName;
        }
        event.eventName = eventName;
        if(el.dispatchEvent){
            el.dispatchEvent(event);
        }else if(el.fireEvent && htmlEvents['on'+eventName]){// IE < 9
            el.fireEvent('on'+event.eventType,event);// can trigger only real event (e.g. 'click')
        }else if(el[eventName]){
            el[eventName]();
        }else if(el['on'+eventName]){
            el['on'+eventName]();
        }
    }
    function addEvent(el,type,handler){
        if(el.addEventListener){
            el.addEventListener(type,handler,false);
        }else if(el.attachEvent && htmlEvents['on'+type]){// IE < 9
            el.attachEvent('on'+type,handler);
        }else{
            el['on'+type]=handler;
        }
    }
    function removeEvent(el,type,handler){
        if(el.removeventListener){
            el.removeEventListener(type,handler,false);
        }else if(el.detachEvent && htmlEvents['on'+type]){// IE < 9
            el.detachEvent('on'+type,handler);
        }else{
            el['on'+type]=null;
        }
    }

    var _body = document.body;
    var customEventFunction = function(){
        alert('triggered custom event');
    }
    // Subscribe
    addEvent(_body,'customEvent',customEventFunction);
    // Trigger
    triggerEvent(_body,'customEvent');

Upvotes: 9

Related Questions