点击按钮事件穿透

描述：
左侧div，down按钮；右侧遮罩div，up按钮
目标：
当点击up按钮的时候，可以进行响应；
当点击down按钮的时候，可以进行响应；

思路1：pointer-events
pointer-events概述：
（1）允许作者控制特定的图形元素在何时成为鼠标事件的target。当未指定该属性时，SVG内容表现如同visiblePainted。
（2）除了指定元素不成为鼠标事件的目标，none值还指示鼠标事件穿过该元素，并指向位于元素下面的元素。
注意事项：
（1）子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
（2）如果你对一个元素设置了click事件监听器，然后你移除了pointer-events样式声明，或把它的值改变为auto，监听器会重新生效。基本上，监听器会遵守pointer-events的设定。

        <div id='div1'">
            <button id='down' onclick = 'handleClick()'>down</button>
        </div>
        <div id='div2'>
            <button id = 'up' onclick = "handleClick2()">up</button>
        </div>
     div{
            width: 300px;
            height: 150px;      
            position: absolute;

        }
        #div1{
            width: 200px;
            position: absolute; 
            background-color: pink;
            left: 0px;

        }
        #down{
            left: 104px;
            top:100px;
            position: absolute;
        }
        #div2{
            pointer-events: none;
            width:200px;        
            background-color: gray;
            left: 100px;
            box-sizing: brder-box;
            opacity: 0.5
        }
        #up{
            pointer-events: auto
        }
        <div onclick='clickDiv()'>
            <div id='div1' onclick="clickDiv1()">
                <button id='down' onclick='clickDown()'>down</button>
            </div>
            <div id='div2' onclick="clickDiv2()">
                <button id='up' onclick='clickUp()'>up</button>
            </div>
        </div>
        function clickDiv(){
            console.log("click parent div")
        }
        function clickDiv1(){
            console.log("click div1")
        }
        function clickDiv2(){
            console.log("click div2")
        }
        function clickUp(){
            console.log('click up')
        }
        function clickDown(){
            console.log('click down')
        }

结果：
当点击遮罩层按钮up，打印click up，click div2, click parent div
当点击下层按钮down，打印click down, click div1, click parent div
当点击遮罩层div2与底层div1重叠部分，打印click div1, click parent div
当点击遮罩层div2非重叠部分，打印click parent div
说明：
当将div2的pointer-events属性设置为none的时候，div2的鼠标事件被禁掉，当设置up button的pointer-events的时候，可以对其父元素div2进行解禁。

思路2：遍历
(1)

function handleClick(e) {
            alert("this is down");
        }
        function handleClick2(e) {
            alert("this is up");
        }
        function handleEvent(e, eventname) {
            if (e.target === elementb) {
                let elementArray = [];
                elementb.style.visibility = "Hidden";
                elementArray.push(elementb);
                while(true) {
                    let underElement = document.elementFromPoint(e.clientX, e.clientY);

                    if (underElement) {
                        if (!underElement.touchthrough) {
                            // underElement.dispatchEvent(new );
                            underElement["click"](e);
                            break;
                        } else {
                            underElement.style.visibility = "Hidden";
                            elementArray.push(underElement);
                        }
                    } else {
                        break;
                    }
                }
                for (let i = 0; i < elementArray.length; i++) {
                    elementArray[i].style.visibility = "Visible";
                }
                elementArray.length = 0;
            }
        } 
        var elementa = document.getElementById("div1");
        elementa.touchthrough = false;
        var elementb = document.getElementById("div2");
        elementb.touchthrough = true;
        elementb.addEventListener("click", (e)=>{
            handleEvent(e, "click");
        });

(2)

       div{
            width: 300px;
            height: 150px;      
            position: absolute;

        }
        #div1{
            width: 200px;
            position: absolute; 
            background-color: pink;
            left: 0px;

        }
        #down{
            left: 104px;
            top:100px;
            position: absolute;
        }
        #div2{
            width:200px;        
            background-color: gray;
            left: 100px;
            box-sizing: brder-box;
            opacity: 0.5
        }
    <div>
        <div id='div1'">
            <button id='down'>down</button>
        </div>
        <div id='div2'>
            <button id = 'up'>up</button>
        </div>
    </div>
    var up = document.getElementById("up")
        var down = document.getElementById("down")
        up.onclick = function(){
            alert("up")
            event.stopPropagation();
        }
        down.onclick = function(){
            alert("down")
        }

        var elements = []
        var btns = []
        function circleSet(x, y){
            var ele = document.elementFromPoint(x, y);  
            if((ele.tagName.toLowerCase() == 'button' || ele.tagName.toLowerCase() == 'html')){
                if(ele.tagName.toLowerCase() == 'button'){
                    btns.push(ele);
                }           
                return
            }
            elements.push(ele);
            ele.style.display = "none";
            circleSet(x, y)
        }
        document.onclick = function(){
            btns = []
            elements = []
            circleSet(event.clientX, event.clientY);
            elements.map(function(ele){ele.style.display = 'block';})       
            btns.map(function(node){return node['click']()})
        }