JavaScript click function not triggering JSF action method immediately on IE

问题

I've recognized that when a click is done via JavaScript it won't trigger the action method immediately on IE, instead the browser wait's until the code has gone through the function where click is made and after that triggers the action method.

On Chrome the action method is triggered immediately when the click is done.

Here is an example xhtml code:

<h:form>
    <ace:pushButton id="button1" action="#{someBean.someFunction1}" label="Button1" />
</h:form>
<h:form>
    <ace:pushButton id="button2" action="#{someBean.someFunction2}" label="Button2" />
</h:form>
<h:form>
    <ace:pushButton id="button3" action="#{someBean.someFunction3}" label="Button3" />
</h:form>
<h:form>
    <ace:pushButton id="button4" action="#{someBean.someFunction4}" label="Button4" />
</h:form>

And here is an example javaScript code:

function setTestButtonsOnclickFunctions() {
    var button1 = document.querySelector('[id*="button1_button"]');
    var button2 = document.querySelector('[id*="button2_button"]');
    var button3 = document.querySelector('[id*="button3_button"]');
    var button4 = document.querySelector('[id*="button4_button"]');

    button1.onclick = function() {
        button2.click();
        var someRandomVariable = 10;
    };

    button2.onclick = function() {
        var someRandomVariable = 10;
    };
    button3.onclick = function() {
        button4.click();
        alert("Button 4 clicked in JavaScript");
        var someRandomVariable = 10;
    };

    button4.onclick = function() {
        var someRandomVariable = 10;
    };
}

(function($) {
    $(document).ready(setTestButtonsOnclickFunctions);
})(jQuery);

Note:

As you can see there is an alert in the button3 onclick function.
It is there because I recognized that when the alert is triggered the action method is triggered.
But without it, the action method is triggered after the onclick function has finished.

There is also the someRandomVariable to show that when the code has passed the click() method the action method isn't triggered on IE, but is triggered on Chrome. This makes it easy to debug.

Why there is two buttons is because it is an easy way to test the click() method.

Questions:

1. Why doesn't the action method trigger on IE immediately?
2. Why doesn't the click() method trigger the action method on IE as it does on Chrome?
3. Is there a way to trigger the action method immediately on IE when the click() method is runned, without using an alert?

For the last question you might wonder why somebody would even want that.

Well I have a scenario where I would want to run a action method when the window closes.
I use the beforeunload method in JavaScript but the action method is never triggered on IE because of the things I mentioned above.

Another question:

Is there a way to trigger an action method inside a beforeunload event on IE?

回答1:

// Try this

(function($) {   

setTestButtonsOnclickFunctions()

})(jQuery);

来源：https://stackoverflow.com/questions/51840015/javascript-click-function-not-triggering-jsf-action-method-immediately-on-ie