document
The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can be the target of mouse events
common attributes
/* Keyword values */
pointer-events: auto; /* 与pointer-events属性未指定时的表现效果相同 */
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
Case number one
Look at a piece of css and js code, nested from inside to outside
<style>
.box-green {
width: 800px;
height: 300px;
background-color: green;
}
.box-yellow {
width: 500px;
height: 250px;
background-color: yellow;
}
.box-red {
width: 300px;
height: 200px;
background-color: red;
}
</style>
<div
class="box-green"
id="box-green"
>
<div
class="box-yellow"
id="box-yellow"
>
<div
class="box-red"
id="box-red"
></div>
</div>
</div>
<script>
let boxGreen = document.querySelector('#box-green')
let boxYellow = document.querySelector('#box-yellow')
let boxRed = document.querySelector('#box-red')
boxGreen.addEventListener('click', function () {
console.log('boxGreen click')
})
boxYellow.addEventListener('click', function () {
console.log('boxYellow click')
})
boxRed.addEventListener('click', function () {
console.log('boxRed click')
})
</script>
Click 红色部分event trigger sequence
boxRed click
boxYellow click
boxGreen click
Click 黄色部分event trigger sequence
boxYellow click
boxGreen click
Click 绿色部分event trigger sequence
boxGreen click
case two
Modify the layout, relative positioning of the outer layer, absolute positioning of the inner layer
<style>
.box-green {
width: 800px;
height: 300px;
background-color: green;
position: relative;
}
.box-yellow {
position: absolute;
left: 0;
width: 300px;
height: 250px;
background-color: yellow;
}
.box-red {
position: absolute;
right: 0;
width: 300px;
height: 250px;
background-color: red;
}
</style>
<div
class="box-green"
id="box-green"
>
<div
class="box-yellow"
id="box-yellow"
></div>
<div
class="box-red"
id="box-red"
></div>
</div>
<script>
let boxGreen = document.querySelector('#box-green')
let boxYellow = document.querySelector('#box-yellow')
let boxRed = document.querySelector('#box-red')
boxGreen.addEventListener('click', function () {
console.log('boxGreen click')
})
boxYellow.addEventListener('click', function () {
console.log('boxYellow click')
})
boxRed.addEventListener('click', function () {
console.log('boxRed click')
})
</script>
Click 绿色部分event trigger sequence
boxGreen click
Click 黄色部分event trigger sequence
boxYellow click
boxGreen click
Click 红色部分event trigger sequence
boxRed click
boxGreen click
If you set the css property
.box-red {
position: absolute;
right: 0;
width: 300px;
height: 250px;
background-color: red;
/* 取消鼠标事件 */
pointer-events: none;
}
Clicking 红色区域will only trigger the following events, realizing the penetration effect
boxGreen click
Refer to
css click through pointer-events: none; generally used for masking