html js如何防止点击遮罩层下面的元素

各位大虾 ，我在body里面动态加了一个遮罩层，遮罩层显示的时候为什么还能点击到遮罩层下面的元素，有什么解决方法吗？？

//遮罩层
                var mask = document.getElementsByClassName("mui-show-loading-mask");
                if (mask.length == 0) {
                    mask = document.createElement('div');
                    mask.classList.add("mui-show-loading-mask");
                    document.body.appendChild(mask);
                    mask.addEventListener("touchmove", function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                    });
                } else {
                    mask[0].classList.remove("mui-show-loading-mask-hidden");
                }

.mui-show-loading-mask {
        position: fixed;
        z-index: 1000;
        background: rgba(213, 213, 213, 0.6);
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    .mui-show-loading-mask-hidden {
        display: none !important;
    }

给遮幕层加事件啊，点击后阻止冒泡事件就好了，e.stopPropagation()

试试pointer-events: none;防止触摸穿透