在平板電腦和手機上不工作的元素之外點擊

Question

當用戶點擊屏幕上的任何位置時，我會在頁面上放置一個腳本，以隱藏具有特定類的所有元素。 該代碼在PC上完美工作，但不適用於平板電腦和手機。我應該只使用Javascript，而不是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

點擊事件在個人電腦上工作，因爲它與鼠標點擊相關聯。但是，在桌面和手機上，沒有點擊事件。相反，您應該使用觸摸事件。試試這個：

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