css属性pointer-events实现点击穿透的示例代码
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">常用属性</a></li><li><a href="#_label1">案例一</a></li><li><a href="#_label2">案例二</a></li><li><a href="#_label3">参考</a></li></ul></div><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events" rel="external nofollow"target="_blank">pointer-events文档 </a></p><p>pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target</p>
<p class="maodian"><a name="_label0"></a></p><h2>常用属性</h2>
<div class="jb51code"><pre class="brush:css;">/* Keyword values */
pointer-events: auto; /* 与pointer-events属性未指定时的表现效果相同 */
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;</pre></div>
<p class="maodian"><a name="_label1"></a></p><h2>案例一</h2>
<p>看一段 css 和 js 代码，由里到外嵌套</p>
<div class="jb51code"><pre class="brush:xhtml;"><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></pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202307/2023071916155840.png" /></p>
<p>点击<code>红色部分</code> 事件触发顺序</p>
<div class="jb51code"><pre class="brush:css;">boxRed click
boxYellow click
boxGreen click</pre></div>
<p>点击<code>黄色部分</code> 事件触发顺序</p>
<div class="jb51code"><pre class="brush:css;">boxYellow click
boxGreen click</pre></div>
<p>点击<code>绿色部分</code> 事件触发顺序</p>
<div class="jb51code"><pre class="brush:css;">boxGreen click</pre></div>
<p class="maodian"><a name="_label2"></a></p><h2>案例二</h2>
<p>修改一下布局，外层相对定位，内层绝对定位</p>
<div class="jb51code"><pre class="brush:xhtml;"><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></pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202307/2023071916155841.png" /></p>
<p>点击<code>绿色部分</code> 事件触发顺序</p>
<div class="jb51code"><pre class="brush:css;">boxGreen click</pre></div>
<p>点击<code>黄色部分</code> 事件触发顺序</p>
<div class="jb51code"><pre class="brush:css;">boxYellow click
boxGreen click</pre></div>
<p>点击<code>红色部分</code> 事件触发顺序</p>
<div class="jb51code"><pre class="brush:css;">boxRed click
boxGreen click</pre></div>
<p>如果设置css属性</p>
<div class="jb51code"><pre class="brush:css;">.box-red {
position: absolute;
right: 0;
width: 300px;
height: 250px;
background-color: red;
/* 取消鼠标事件 */
pointer-events: none;
}</pre></div>
<p>点击<code>红色区域</code>，只会触发如下事件，实现了穿透效果</p>
<div class="jb51code"><pre class="brush:css;">boxGreen click</pre></div>
<p class="maodian"><a name="_label3"></a></p><h2>参考</h2>
<p><a href="https://blog.csdn.net/weixin_42729938/article/details/123902027" rel="external nofollow"target="_blank">css 点击穿透 pointer-events: none；一般用于遮罩</a></p>
頁:
[1]