在平板电脑和手机上不工作的元素之外点击

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 
}