点击按钮事件穿透

51 阅读 0 评论 34 点赞

我是靠谱客的博主整齐大象，最近开发中收集的这篇文章主要介绍点击按钮事件穿透，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这里写图片描述

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