TYPO3 Core

I have an email link according to the following structure:

<a class="mail-button" href="#" data-mailto-token="ocknvq,hqqBdct0vnf" data-mailto-vector="1">
  <span class="icon-mail"></span>
</a>

It is a simple letter symbol with some padding.

If I click on the padding area, the JavaScript from the default_frontend.js is executed correctly.
But if I click on the letter-symbol, i.e. the span-tag, the JavaScript gets as "evt.target" not the a-tag, but the span-tag, which has no data-attributes and thus the missing "value" leads to a JavaScript error.

/typo3/sysext/frontend/Resources/Public/JavaScript/default_frontend.js

Extract from this file, line 92-100

    Array.from(mailtoElements).forEach(function(element) {
        element.addEventListener('click', function(evt) {
          evt.preventDefault();
          var dataset= evt.target.dataset;   // evt can be childNode, if a-tag has child-elements
          var value = dataset.mailtoToken;
          var offset = parseInt(dataset.mailtoVector, 10) * -1;
          document.location.href = decryptString(value, offset);
        });
      });

I have now solved the problem using CSS. However, it would be nicer not to let the problem arise directly in the JavaScript in the first place.

My current bugfix:

    a.mail-button span {
        pointer-events: none;  # disables click-event on child span-tag
    }