描述： 左侧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']()}) }