I have a click handler function for a button on my web page. The handler knows which operation to execute based on the button attributes via event.target.dataset. It worked as expected until some users reported strange behavior that I was able to track down to Chrome integrated translation.

I can reproduce the issue with Chrome sending a generated font element instead of the expected button to the handler when automatic translation is on.

Any ideas how to best handle this situation? I’m reluctant to write special javascript just for Chrome translation support but still would like people to be able to use the website trnslated to their native language.

As a last resort I can mark the page/button with a no-translate metatag/class but this kinda defeats the purpose of the automatic translation.

    if (condition)
        <button class='btn' id='Signatory{$index}_edit'>%s</button>
    else
        <button class='btn' id='Signatory{$index}_edit' data-new='1'>%s</button>
...
    $( '#Signatory1_edit' ).click( ( ev ) => editSignatory( ev, 1 ) );