Question

我必须切换导航和功能，当您单击外部菜单时（在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";
}

Answer 1

我已移除touchstart个活动，只留下touchend，现在它正常运作。

JavaScript触摸事件在图层下方点击

1 个答案: