Javascript dispatchEvent 点击在 IE9 和 IE10 中不起作用

Javascript dispatchEvent click is not working in IE9 and IE10

提问by Muthu

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

我正在尝试在 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");

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.

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

回答by Marco Pappalardo

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

前段时间我遇到了与自定义事件相同的问题，并通过使用在另一个问题中找到的代码解决了： 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.

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

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

但我也建议您使用 .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 gospodaretsfrom the other question, which could be useful.

我正在这里粘贴sergey gospodaret来自另一个问题的代码，这可能很有用。

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

回答by Mr. Raymond Kenneth Petry

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....

没有阅读你的问题，我可以告诉你 fireEvent 甚至在 IE11 上也能工作，例如WMP.fireEvent("onmouseup")WMP 是 [我的] windowsmediaplayer 对象元素......

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

更糟糕的是，有时会if(attachEvent)抛出错误而不是取出错误false。