CODEWITHSUNDEEP
javascriptvue.jsrender
Tom
Tom

Reputation: 21

"[Violation] 'click' handler took 43665ms" in vue.js

Maybe it render, that took xxMS. What happen? Anytime I close the print page, I receive this message in the chrome console. Does anyone fix this problem?

<button @click="printScreen()" type="button">print</button>

<div ref="printparts">test</div>

    methods: {
          printScreen() {
            let value = this.$refs.printparts;
            let printPage = window.open();
            printPage.focus();
            printPage.document.body.insertAdjacentHTML('afterbegin', value.outerHTML);
            printPage.print();
            printPage.close();
          },
        },

Upvotes: 1

Views: 9349

Answers (2)

Tom
Tom

Reputation: 21

I used onmouseover and Chrome doesn't show the violation, but Performance say Warning. enter image description here

printScreen() {
        let value = this.$refs.printparts;
        let printPage = window.open();
        printPage.focus();
        printPage.document.body.insertAdjacentHTML('afterbegin', value.outerHTML);
        printPage.onmouseover = function() {
          printPage.print();
          printPage.close();
        };
        return false;
      },

Upvotes: 0

Genie
Genie

Reputation: 325

The reason why you are getting this violation warning is likely because the event handler doesn't return until the print page is closed. So, when you click the button the print page opens, then nothing happens until the print page is closed, then the function returns.

Upvotes: 4

Related Questions