文章目录
- 前倾提要
- 当没有设置属性pointer-events时候
- 结果
- 当子元素设置了pointer-events: none
- 修改后的代码
- 结果如下所示
- 当父元素设置了pointer-events: none
- 若两个div同级也就是兄弟级
前倾提要
在gis三维开发的地图组件上放一个背景图片，左右两侧的颜色渐变等，或者gis三维地图上放一张设计过的图片作为地球覆盖在上面的背景时就很有用，即使整个div覆盖在地球上，也不影响操作三维地球。当然也可以通过定位的方式，在地球组件上的两侧创建两个div，然后设置背景颜色，左右两侧的div占一部分宽度。中间啥都没有，也不影响地球操作。但是左右两侧对应宽度的范围也会影响点击操作。
当没有设置属性pointer-events时候
有如下代码，如果我有两个div，其中第一个div有一个按钮，第二个div通过子绝父相的形式定位，覆盖在第一个div上面。这时就会有一个问题，覆盖在上面的div的鼠标事件就会影响第一个div的事件，也就是说，第一个div的按钮点不到，因为覆盖在上面了，上面的div挡住了点击第一个div的按钮。具体代码和结果如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 800px;
height: 600px;
background-color: rgba(214, 57, 201, 0.699);
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="parent">
<button id="buttonClick">父元素按钮点击事件</button>
<div class="child">子元素</div>
</div>
<script>
function handleClick() {
alert('点击了父元素里面的按钮！！！');
}
document.querySelector('#buttonClick').addEventListener('click', handleClick);
// document.querySelector('.parent').addEventListener('click', handleClick);
document.querySelector('.parent').addEventListener('click', function() {
alert('点击父元素');
});
document.querySelector('.child').addEventListener('click', function() {
alert('点击了子元素');
});
</script>
</body>
</html>
结果
结果如下所示：
可以发现我们无法点击到父元素中的按钮。那如果我需要覆盖的子div的颜色作为父元素的背景，然后又不影响父元素的点击按钮，那么我们该如何设置呢？具体往下看就知道了。这里有一个应用场景，在gis三维开发的地图组件上放一个背景图片，左右两侧的颜色渐变等，或者gis三维地图上放一张设计过的图片作为地球覆盖在上面的背景时就很有用，即使整个div覆盖在地球上，也不影响操作三维地球。当然也可以通过定位的方式，在地球组件上的两侧创建两个div，然后设置背景颜色，左右两侧的div占一部分宽度。中间啥都没有，也不影响地球操作。但是左右两侧对应宽度的范围也会影响点击操作。具体修改如下所示
当子元素设置了pointer-events: none
修改后的代码
在子组件添加对应的css属性pointer-events: none;，具体如下所示。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 800px;
height: 600px;
background-color: rgba(214, 57, 201, 0.699);
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
</style>
</head>
<body>
<div class="parent">
<button id="buttonClick">父元素按钮点击事件</button>
<div class="child">子元素</div>
</div>
<script>
function handleClick() {
alert('点击了父元素里面的按钮！！！');
}
document.querySelector('#buttonClick').addEventListener('click', handleClick);
// document.querySelector('.parent').addEventListener('click', handleClick);
document.querySelector('.parent').addEventListener('click', function() {
alert('点击父元素');
});
document.querySelector('.child').addEventListener('click', function() {
alert('点击了子元素');
});
</script>
</body>
</html>
结果如下所示
从结果可以看出，子元素的点击事件失效了。这是又有一个问题了，设置了pointer-events: none;之后，子元素中的按钮事件会不会受到影响呢？具体代码和结果如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 800px;
height: 600px;
background-color: rgba(214, 57, 201, 0.699);
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
</style>
</head>
<body>
<div class="parent">
<button id="buttonClick">父元素按钮点击事件</button>
<div class="child">
<div>子元素</div>
<div>
<button id="childButtonClick">子元素按钮点击事件</button>
</div>
</div>
</div>
<script>
function handleClick() {
alert('点击了父元素里面的按钮！！！');
}
document.querySelector('#buttonClick').addEventListener('click', handleClick);
// document.querySelector('.parent').addEventListener('click', handleClick);
document.querySelector('.parent').addEventListener('click', function () {
alert('点击父元素');
});
document.querySelector('.child').addEventListener('click', function () {
alert('点击了子元素');
});
document.querySelector('#childButtonClick').addEventListener('click', function () {
alert('点击了子元素里面的按钮，子元素按钮点击事件');
});
</script>
</body>
</html>
从上图可以发现，设置了pointer-events: none;之后，子元素里面的元素点击也失效了。要想让子元素的按钮单击事件生效，我们可以在子元素对应的按钮的div或者按钮上设置pointer-events: auto;即可，具体代码如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 800px;
height: 600px;
background-color: rgba(214, 57, 201, 0.699);
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.child-button {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="parent">
<button id="buttonClick">父元素按钮点击事件</button>
<div class="child">
<div>子元素</div>
<div class="child-button">
<button id="childButtonClick">子元素按钮点击事件</button>
</div>
</div>
</div>
<script>
function handleClick() {
alert('点击了父元素里面的按钮！！！');
}
document.querySelector('#buttonClick').addEventListener('click', handleClick);
// document.querySelector('.parent').addEventListener('click', handleClick);
// document.querySelector('.parent').addEventListener('click', function () {
// alert('点击父元素');
// });
// document.querySelector('.child').addEventListener('click', function () {
// alert('点击了子元素');
// });
document.querySelector('#childButtonClick').addEventListener('click', function () {
alert('点击了子元素里面的按钮，子元素按钮点击事件');
});
</script>
</body>
</html>
结果如下所示
也就是说，这里子元素和父元素点击都生效了。
当父元素设置了pointer-events: none
在父元素没有设置了pointer-events: none; 的时候。
代码如下所示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="parent">
<button id="buttonClick">父元素按钮点击事件</button>
</div>
</div>
<script>
document.querySelector('#buttonClick').addEventListener('click', function() {
alert('点击了父元素里面的按钮！！！');
});
</script>
</body>
</html>
结果如下所示
可以发现里面的元素是能够正常点击的。当设置了pointer-events: none; 的时候。
代码如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
</style>
</head>
<body>
<div class="parent">
<button id="buttonClick">父元素按钮点击事件</button>
</div>
</div>
<script>
document.querySelector('#buttonClick').addEventListener('click', function() {
alert('点击了父元素里面的按钮！！！');
});
</script>
</body>
</html>
结果如下所示：
当按钮设置了pointer-events: auto;之后。代码如下所示。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.child {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="parent">
<button class="child" id="buttonClick">父元素按钮点击事件</button>
</div>
</div>
<script>
document.querySelector('#buttonClick').addEventListener('click', function() {
alert('点击了父元素里面的按钮！！！');
});
</script>
</body>
</html>
结果
如果子元素不是内嵌到父div中时，而是以定位的方式定位到父元素上方时。
代码如下所示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.child {
pointer-events: auto;
}
.position-absolute {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="parent">
<button class="child" id="buttonClick">父元素按钮点击事件</button>
<div class="position-absolute">
<button id="divButton">这是定位的div按钮点击事件</button>
</div>
</div>
</div>
<script>
document.querySelector('#buttonClick').addEventListener('click', function () {
alert('点击了父元素里面的按钮！！！');
});
document.querySelector('#divButton').addEventListener('click', function () {
alert('这是定位-定位-定位-的按钮点击事件');
});
</script>
</body>
</html>
结果如下所示
当定位的div里面的按钮设置了pointer-events: auto;之后。代码如下所示。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.child {
pointer-events: auto;
}
.position-absolute {
position: absolute;
top: 0;
left: 0;
pointer-events: auto;
}
</style>
</head>
<body>
<div class="parent">
<button class="child" id="buttonClick">父元素按钮点击事件</button>
<div class="position-absolute">
<button id="divButton">这是定位的div按钮点击事件</button>
</div>
</div>
</div>
<script>
document.querySelector('#buttonClick').addEventListener('click', function () {
alert('点击了父元素里面的按钮！！！');
});
document.querySelector('#divButton').addEventListener('click', function () {
alert('这是定位-定位-定位-的按钮点击事件');
});
</script>
</body>
</html>
结果如下所示
若两个div同级也就是兄弟级
若两个div同级也就是兄弟级，一个设置了pointer-events: none，并不影响另外一个div的点击事件，另一个div可以是定位的也可以是非定位的。都不影响div的点击事件，因为是兄弟级别的。所以不影响，具体看下面代码的child1、child2、child3是兄弟级别的，其中child1设置了pointer-events: none，child2、child3什么都没有设置。具体代码如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointer-events: none;</title>
<style>
.parent {
width: 800px;
height: 600px;
background-color: rgba(44, 245, 228, 0.829);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.child1 {
pointer-events: none;
}
.child2 {
position: absolute;
top: 0;
left: 0;
}
.child3 {
margin-left: 24px;
}
</style>
</head>
<body>
<div class="parent">
<button class="child1" id="buttonClick">child1-child1-按钮点击事件</button>
<div class="child2">
<button id="divButton">child2-child2-按钮点击事件</button>
</div>
<div class="child3">
<button id="divButton3">child3-child-3-按钮点击事件</button>
</div>
</div>
</div>
<script>
document.querySelector('#buttonClick').addEventListener('click', function () {
alert('点击了父元素里面的按钮！！！');
});
document.querySelector('#divButton').addEventListener('click', function () {
alert('这是child2-child2-child2-的按钮点击事件');
});
document.querySelector('#divButton3').addEventListener('click', function () {
alert('这是child3-child3-child3-的按钮点击事件');
});
</script>
</body>
</html>
结果如下所示：
