TYPO3 Core

Bug #96731

Updated by Markus Eckert almost 3 years ago

I have an email link according to the following structure: 

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

 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. 

 <pre><code class="html"> 
 /typo3/sysext/frontend/Resources/Public/JavaScript/default_frontend.js 
 </code></pre> 

 Extract from this file, line 92-100 

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

 Ich habe das Problem nun mittels CSS gelöst. Schöner wäre allerdings das Problem direkt im JavaScript gar nicht erst entstehen zu lassen. 

 My bugfix: Mein Bugfix: 

 <pre><code class="css"> 
     a.mail-button span { 
         pointer-events: none;    # disables click-event on child span-tag 
     } 
 </code></pre> 

 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. 

Back