JavaScript 触摸事件点击层下

Posted 2023-03-14

【中文标题】JavaScript 触摸事件点击层下

【英文标题】：JavaScript touch event clicks underneath layer

【发布时间】：2018-04-11 09:05:24

【问题描述】：

我有切换导航和功能，当您单击外部菜单（在带有模糊过滤器的 div 上）时，导航正在关闭。我在 ios 手机上遇到了问题，所以我添加了触摸事件。现在可以了，但是还有一个问题——当我点击外部菜单触发关闭功能时，下面的正文内容也在点击。如何防止这种情况？

JS代码：

var sideNav = document.getElementById('Sidenav');
var sliderFilter = document.getElementById('sliderFilter');

function touchHandler () 
        if (event.target.closest("#Sidenav")) 
            // This is a click inside. Do nothing, just return.
            return;
    
    // This is a click outside.
    closeNav();


function openNav() 
    sideNav.classList.add('open');
    sliderFilter.classList.add('open');
    document.addEventListener('click', touchHandler, true);
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    body.style.overflow = "hidden";


function closeNav() 
    sideNav.classList.remove('open');
    sliderFilter.classList.remove('open');
    document.removeEventListener('click', touchHandler, true);
    document.removeEventListener("touchstart", touchHandler, true);
    document.removeEventListener("touchend", touchHandler, true);
    body.style.overflow = "auto";

【参考方案1】：

我已经删除了touchstart 事件，只留下了touchend，它现在可以正常工作了。