Klicken Sie außerhalb eines Elements nicht auf Tablet und Telefon

Question

Ich legte ein Skript auf meiner Seite, um alle Elemente mit einer bestimmten Klasse auszublenden, wenn der Benutzer irgendwo auf dem Bildschirm klickt. Der Code funktioniert perfekt auf dem PC, aber nicht auf Tablets und Telefonen. Ich sollte nur Javascript verwenden, nicht jQuery.

<script type="text/javascript"> 
    function onClick(id) { 
     var e = document.getElementById(id); 
     if(e.className == 'item active') { 
      e.className = 'item none'; 
     } 
     else { 
      var x = document.querySelectorAll('.item.active'); 
      for(var i = 0; i < x.length; i++){ 
       x[i].className = "item none"; 
      } 
      e.className = 'item active';    
     } 
    } 

    function findClosest (element, fn) { 
     if (!element) return undefined; 
     return fn(element) ? element : findClosest(element.parentElement, fn); 
    } 
    document.addEventListener("click", function(event) { 

     if (document.querySelector('.item.active') != null){   
      var t = document.querySelector('.item.active').id; 
     } 

     var target = findClosest(event.target, function(el) { 
      return el.id == t; 
     }); 
     if (!target) { 
      var x = document.querySelectorAll('.item.active'); 
      for(var i = 0; i < x.length; i++){ 
       x[i].className = "item none"; 
      } 
     } 
    }, false); 

</script> 

<div id="item1" class="item none" onclick="onClick('item1')"> 
    ... 
</div> 

<div id="item2" class="item none" onclick="onClick('item2')"> 
    ... 
</div> 

... 

Answer 1

Das Klickereignis funktioniert auf dem PC, weil es mit dem Mausklick verknüpft ist. Auf Tabellen und Telefonen gibt es jedoch kein Klickereignis. Stattdessen sollten Sie Touch-Ereignisse verwenden. Versuchen Sie dies:

document.addEventListener("touchstart", function(event) { 
     // Click outside logic 
}