Javascript dispatchEvent click 在 IE9 和 IE10 中不起作用

Question

我正在尝试在 ExtJs 中的应用程序构建中模拟鼠标事件，例如单击、鼠标悬停等。我正在使用下面的代码来模拟点击，

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");

这在 chrome 和 firefox 上工作正常，但在 IE9 和 IE10 上不工作。如果我使用 btn.fireEvent('onlclick') 那么它在 IE9 中工作正常(未在 IE10 中选中)。 IE9 和 IE10 支持 document.createEvent，但我不确定为什么我的代码不起作用。

Answer 1

前段时间我在自定义事件方面遇到了同样的问题，并通过使用在另一个问题中找到的代码解决了这个问题: Custom events in IE without using libraries

实际上您不需要使用所有代码，它们是 3 个函数，用作浏览器兼容性的包装器。

但我也建议您使用 .click 方法，它可以更轻松地解决您的问题(至少对于正常点击而言) http://www.w3schools.com/jsref/met_html_click.asp

就这样吧

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

我在这里粘贴代码 sergey gospodarets来自另一个问题，这可能会有用。

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