目錄

• 常用屬性
• 案例一
• 案例二
• 參考

pointer-events文檔

pointer-events CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標(biāo)事件的 target

常用屬性

/* Keyword values */
pointer-events: auto; /* 與pointer-events屬性未指定時的表現(xiàn)效果相同 */
pointer-events: none; /* 元素永遠(yuǎn)不會成為鼠標(biāo)事件的target */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

案例一

看一段 css 和 js 代碼，由里到外嵌套

<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>
    <p
      class="5619-bb41-4f1b-1159 box-green"
      id="box-green"
    >
      <p
        class="bb41-4f1b-1159-e6b2 box-yellow"
        id="box-yellow"
      >
        <p
          class="4f1b-1159-e6b2-ed76 box-red"
          id="box-red"
        ></p>
      </p>
    </p>
    <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>

點(diǎn)擊紅色部分 事件觸發(fā)順序

boxRed click
boxYellow click
boxGreen click

點(diǎn)擊黃色部分 事件觸發(fā)順序

boxYellow click
boxGreen click

點(diǎn)擊綠色部分 事件觸發(fā)順序

boxGreen click

案例二

修改一下布局，外層相對定位，內(nèi)層絕對定位

<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>
    <p
      class="7b6d-147f-8874-3ab8 box-green"
      id="box-green"
    >
      <p
        class="7962-655e-5619-bb41 box-yellow"
        id="box-yellow"
      ></p>
      <p
        class="655e-5619-bb41-4f1b box-red"
        id="box-red"
      ></p>
    </p>
    <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>

點(diǎn)擊綠色部分 事件觸發(fā)順序

boxGreen click

點(diǎn)擊黃色部分 事件觸發(fā)順序

boxYellow click
boxGreen click

點(diǎn)擊紅色部分 事件觸發(fā)順序

boxRed click
boxGreen click

如果設(shè)置css屬性

.box-red {
  position: absolute;
  right: 0;
  width: 300px;
  height: 250px;
  background-color: red;
  /* 取消鼠標(biāo)事件 */
  pointer-events: none;
}

點(diǎn)擊紅色區(qū)域，只會觸發(fā)如下事件，實(shí)現(xiàn)了穿透效果

boxGreen click

參考

css 點(diǎn)擊穿透 pointer-events: none；一般用于遮罩

到此這篇關(guān)于css屬性pointer-events實(shí)現(xiàn)點(diǎn)擊穿透的示例代碼的文章就介紹到這了,更多相關(guān)css pointer-events點(diǎn)擊穿透內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的css属性pointer-events实现点击穿透的示例代码(Css属性大全)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。